Wir sind Ihr Dienstleister für erfolgreiche Projekte in der Microsoft Welt!

<svg id="chart" width="500" height="600"></svg>

.node text {
            font-family: Arial, sans-serif;
            font-size: 14px;
            pointer-events: none;
        }
        .link {
            stroke: #999;
            stroke-opacity: 0.6;
            stroke-width: 2px;
        }

    const svg = d3.select("#chart");

    // Sample data for nodes and links
    const nodes = [
    { id: 'Beratung', text: 'Beratung' },
    { id: 'Entwicklung', text: 'Entwicklung' },
    { id: 'Projektmanagement', text: 'Projektmanagement' },
    { id: 'UX & UI', text: 'UX & UI' },
    { id: 'Betrieb & Support', text: 'Betrieb & Support' },
    { id: 'Change Management', text: 'Change Management' },
    { id: 'Schulungen', text: 'Schulungen' },
    { id: 'rnd_node1', text: '' },  // Random node 1 without label
    { id: 'rnd_node2', text: '' }   // Random node 2 without label
];

const links = [
    { source: 'Beratung', target: 'Entwicklung' },
    { source: 'Beratung', target: 'Projektmanagement' },
    { source: 'Beratung', target: 'UX & UI' },
    { source: 'Projektmanagement', target: 'Betrieb & Support' },
    { source: 'Betrieb & Support', target: 'Change Management' },
    { source: 'Schulungen', target: 'Change Management' },
    { source: 'Schulungen', target: 'UX & UI' },
    { source: 'UX & UI', target: 'Entwicklung' },
    
    // New links involving rnd_node1 and rnd_node2
    { source: 'rnd_node1', target: 'Beratung' },

    { source: 'rnd_node2', target: 'Change Management' },
    { source: 'rnd_node2', target: 'Projektmanagement' },
    { source: 'rnd_node2', target: 'Schulungen' }
];


    // Create a force simulation
    const simulation = d3.forceSimulation(nodes)
        .force("link", d3.forceLink(links).id(d => d.id).distance(100))
        .force("charge", d3.forceManyBody().strength(-300))
        .force("center", d3.forceCenter(svg.attr("width") / 2, svg.attr("height") / 2));

    // Create links (lines)
    const link = svg.append("g")
        .attr("class", "links")
        .selectAll("line")
        .data(links)
        .enter().append("line")
        .attr("class", "link");

    // Create nodes (circles with labels)
    const node = svg.append("g")
        .attr("class", "nodes")
        .selectAll("g")
        .data(nodes)
        .enter().append("g")
        .call(d3.drag()
            .on("start", dragStarted)
            .on("drag", dragged)
            .on("end", dragEnded));

    node.append("circle")
        .attr("r", 10)
        .attr("fill", "#ff6600");

    node.append("text")
    .attr("x", 15) // Positioning of the label
    .attr("y", 5)
    .attr("fill", "#333") // Text color (changed to a dark gray)
    .attr("font-size", "16px") // Larger font size
    .attr("font-family", "Arial, sans-serif") // Font family
    .attr("font-weight", "bold") // Bold font style
    .attr("text-anchor", "start") // Align text to start (left)
    .attr("alignment-baseline", "middle") // Vertically align the text to the center of the circle
    .attr("pointer-events", "none") // Disable pointer events on text (so it won't interfere with dragging)
    .attr("opacity", 0.8) // Slightly transparent text for a softer look
    .text(d => d.text);


    // Update positions based on simulation
    simulation.on("tick", () => {
        link
            .attr("x1", d => d.source.x)
            .attr("y1", d => d.source.y)
            .attr("x2", d => d.target.x)
            .attr("y2", d => d.target.y);

        node
            .attr("transform", d => `translate(${d.x},${d.y})`);
    });

    // Drag functions
    function dragStarted(event, d) {
        if (!event.active) simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
    }

    function dragged(event, d) {
        d.fx = event.x;
        d.fy = event.y;
    }

    function dragEnded(event, d) {
        if (!event.active) simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
    }