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会给我一个关于如何将它放入我的程序的正确想法。

所以我只是调用构建函数两次（任何顺序都是错误的）。左侧节点有文本，但其中一个不是正确的文本字段。同时将它拖动一点点就可以了。＆＃34;离开＆＃34;它背后的文字。右图没什么。

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

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

更新小提琴：https://jsfiddle.net/gilsha/qe7bbnwn/1/

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

1 个答案: