javascript - 1 个 svg 中的多个力导向图(文本显示问题)

Question

我想显示多个力定向图。最好也只使用 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);

}

这实际上对于我的节点和链接来说似乎工作得很好。我的问题是，所有节点的文本都不会像我只传递一组数据时那样显示。我在力模拟中定义了这样的文本:

var nodes_text = svg.selectAll(".nodetext")
        .data(nodes)
        .enter()
        .append("text")
        .attr("class", "nodetext slds-text-heading--label")
        .attr("text-anchor", "middle")
        .attr("dx", -20)
        .attr("dy", 20)
        .text(d=>d.name)
        .attr('opacity',0)

我只需为节点创建 2 个数组，为边创建 2 个数组并将其传递到模拟中即可重现此错误。这是一个重现我的错误的简单程序: https://jsfiddle.net/mg8b46aj/9/

我认为修复这个 JFiddle 会给我关于如何将它放入我的程序中的正确想法。

所以我只调用构建函数两次(任何一个顺序都是错误的)。左侧节点有文本，但其中之一不是正确的文本字段。另外，稍微拖动它会使其“留下”其文本。右图什么也没有。

编辑:单击右侧图表上的节点似乎会重置文本位置。

Answer 1

问题在于用于选择标签的 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");

更新的 fiddle :https://jsfiddle.net/gilsha/qe7bbnwn/1/