Question

我有以下json字符串：

{  
  "name":1000,
  "children":[  
  {  
     "name":2000,
     "children":[  

     ]
  },
  {  
     "name":3000,
     "children":[  
        {  
           "name":6000,
           "children":[  
              {  
                 "name":8000,
                 "children":[  

                 ]
              }
           ]
        },
        {  
           "name":7000,
           "children":[  

           ]
        }
     ]
  },
  {  
     "name":4000,
     "children":[  
        {  
           "name":5000,
           "children":[  

           ]
        },
        {  
           "name":5000,
           "children":[  

           ]
        },
        {  
           "name":7000,
           "children":[  

           ]
        }
     ]
  }
 ]
}

使用d3成功创建了树，但是当前它正常工作时，节点7000显示为3000和4000的子节点。我想要实现的是单个节点7000，其中2个链接将其连接到3000和4000分别。怎么可以这样做？

// Compute the new tree layout.
    var nodes = tree.nodes(root).reverse(),
        links = tree.links(nodes);

 // Update the links…
    var link = svg.selectAll("path.link")
        .data(links, function (d) { return d.target.id; });

    // Enter any new links at the parent's previous position.
    link.enter().insert("path", "g")
        .attr("class", "link")
        .attr("d", function (d) {
            var o = { x: source.x0, y: source.y0 };
            return diagonal({ source: o, target: o });
        });

如果您需要更多代码，请告诉我。谢谢你的帮助。

Answer 1

如果节点是另外两个节点的子节点，则根据定义它不是tree。因此，我不假设15层次结构和布局不会按照您希望的方式处理。

Multiple Parent Nodes示例首先将非循环图数据布局为树，然后以仅视觉方式添加循环边;寻找＆＃34; multiParent＆＃34;在冗长的示例代码中。

您可以在此处执行相同操作：克隆数据，删除重复项，例如＆＃34; 7000＆＃34;，并将其提供给树布局。绘图时，遍历原始数据并绘制循环边。然而，这可能会给你非常不整洁的布局，因为路由器不了解所有边缘，因此不能优化节点位置，以便最小化交叉边缘。

D3.js树布局没有重复

1 个答案: