Node Pies in Force-Directed Layout

<!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>

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);

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>

https://d3js.org/d3.v4.min.js