Javascript 1个svg中的多个力定向图（文本显示问题）

我想显示多个力定向图。最好也只使用1个svg元素（因为我认为这会提高性能，并且让我为整个模拟创建一个宽度和高度，因为这可能会根据数据而有所不同）

我的第一个想法是，通过一些研究，我只是做了一个for循环，重新评估了我的节点/边数组，并将其放入生成力定向图的函数中

 for (var i = 0; i < sampleData.length; i++)
{
            var nodes = [];     
    var edges = [];

            x = x+100; //update position (i want to show grpahs side by side.)          

    root = sampleData[i];

    nodes.push({"name": root, "x": x, "y": y, "fixed": true, "color": "purple"}); 

        //These 2 recurisve functions generate my nodes and edges array just fine. 
     buildParents(childs, parents, test, counter);         
     buildChildren(childs, parents, test, counter);

     //apply id to each node
        nodes.forEach((d,i)=>d.generatedId='id'+i);

            //build makes the force-directed layout.
        build(nodes, edges);

}

我可以通过制作两个节点阵列和两个边阵列并将其传递到模拟中来重现这个错误。下面是一个复制我的错误的简单程序：

我认为修复这个JFiddle会给我一个正确的想法，让我知道如何把它放在我的程序中

所以我只需调用构建函数两次（任意一个顺序都是错误的）。左侧节点有文本，但其中一个不是正确的文本字段。还可以稍微拖动它，使其“留下”文本。右边的图表没有任何内容

---

编辑：点击右图上的a节点似乎会重置文本位置。

问题在于用于选择标签的d3选择器。由于您需要两个单独的力布局图，因此应使用如下所示的选择器作为标签

var nodes_text = svg.append('g') //Append new group for labels in new diagram 
        .attr("class", "labels")
        .selectAll(".nodetext")
        .data(nodes)
        .enter()
        .append("text");

更新小提琴：

var nodes_text = svg.append('g') //Append new group for labels in new diagram 
        .attr("class", "labels")
        .selectAll(".nodetext")
        .data(nodes)
        .enter()
        .append("text");