没有重复的 D3.js 树布局答案

【问题标题】：D3.js tree layout without duplicates没有重复的 D3.js 树布局
【发布时间】：2017-10-22 04:39:09
【问题描述】：

我有以下 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 });
        });

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

【问题讨论】：

标签： javascript html d3.js svg duplicates

【解决方案1】：

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

Multiple Parent Nodes 示例首先将非循环图数据布局为一棵树，然后添加循环边，仅以视觉方式；在较长的示例代码中查找“multiParent”。

您可以在此处执行相同操作：克隆数据，删除“7000”之类的重复项，然后将其提供给树形布局。绘制时，遍历原始数据，同时绘制循环边。然而，这可能会给您带来非常不整洁的布局，因为布局器不知道所有边，因此无法优化节点位置以最小化交叉边。

【讨论】：