D3 Examples - Node Pies in Force-Directed Layout

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    .links line {
        stroke: #999;
        stroke-opacity: 0.6;
    }
​
    text {
        font-size: 1em;
        font-weight: bold;
        -webkit-font-smoothing: antialiased;
    }
</style>
​
<svg width="960" height="600"></svg>
​
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="node-pie.js"></script>
​
<script>
    
    var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height");
​
    var color = d3.scaleOrdinal(d3.schemeCategory10);
​
    var simulation = d3.forceSimulation()
            .force("link", d3.forceLink().id(function (d) {
                return d.id;
            }))
            .force("charge", d3.forceManyBody().strength(-900))
            .force("center", d3.forceCenter(width / 2, height / 2));
​
    d3.json("data.json", function (error, graph) {
        if (error) throw error;
​
        var link = svg.append("g")
                .attr("class", "links")
                .selectAll("line")
                .data(graph.links)
                .enter().append("line")
                .attr("stroke-width", function (d) {
                    return Math.sqrt(d.value);
                });
​
        var node = svg.append("g")
                .attr("class", "nodes")
                .selectAll("g")
                .data(graph.nodes)
                .enter()
                .append("g")
                .call(d3.drag()
                        .on("start", dragstarted)
                        .on("drag", dragged)
                        .on("end", dragended));
​
        /* Draw the respective pie chart for each node */
        node.each(function (d) {
            NodePieBuilder.drawNodePie(d3.select(this), d.pieChart, {
                parentNodeColor: color(d.group),
                outerStrokeWidth: 12,
                showLabelText: true,
                labelText: d.id,
                labelColor: color(d.group)
            });
        });
​
        simulation
                .nodes(graph.nodes)
                .on("tick", ticked);
​
        simulation.force("link")
                .links(graph.links);
​
        function ticked() {
            link
                    .attr("x1", function (d) {
                        return d.source.x;
                    })
                    .attr("y1", function (d) {
                        return d.source.y;
                    })
                    .attr("x2", function (d) {
                        return d.target.x;
                    })
                    .attr("y2", function (d) {
                        return d.target.y;
                    });
​
            d3.selectAll("circle").attr("cx", function (d) {
                        return d.x;
                    })
                    .attr("cy", function (d) {
                        return d.y;
                    });
​
            d3.selectAll("text").attr("x", function (d) {
                        return d.x;
                    })
                    .attr("y", function (d) {
                        return d.y;
                    });
        }
    });
​
    function dragstarted(d) {
        if (!d3.event.active) simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
    }
​
    function dragged(d) {
        d.fx = d3.event.x;
        d.fy = d3.event.y;
    }
​
    function dragended(d) {
        if (!d3.event.active) simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
    }
    
</script>
    