D3 为具有附加父级和兄弟级路径的树结构调整强制布局

Question

D3 是否提供了创建树的可能性，其中在同一级别的节点之间存在连接，但也提供独立于不同级别的级别的路径（例如，级别 2 的节点 3 应该具有到节点 6 的可视链接4 级）。

我的意思是这样的：

       (1)
   (2)_/ \_(3)
   /_(4)     \
      /_(5)__(6)

我认为这是一个“正常”的图形结构，但我必须像树一样自上而下地将其可视化。 也许http://bl.ocks.org/GerHobbelt/3683278 将是一个很好的起点，但我怎样才能让 force-layout 像树一样更清晰地可视化节点？

编辑： 我的数据如下所示：

{
 "name": "Root",
 "children": [
  {
   "name": "1",
   "children": [
    {
     "name": "2",
     "children": [
      {"name": "20"},
      {"name": "21"},
      {"name": "22"}
     ]
    },
    {
     "name": "3",
     "children": [
      {"name": "31",
         "children": [
          {"name": "300"},
          {"name": "301"},
          {"name": "302",
             "children": [
              {"name": "3020"},
              {"name": "3021"},
              {"name": "3022"}
             ]
          }
         ]
      },
      {"name": "32"},
      {"name": "33"},
      {"name": "34"}
     ]
    },
    {
     "name": "4",
     "children": [
      {"name": "41"},
      {"name": "41"}
     ]
    }
   ]
  }
 ]
}

我复制了这样的树示例：http://bl.ocks.org/mbostock/4339083

我现在如何添加单个链接？例如在节点 '2' 和 '3' 之间？ 我加了

var dataset = {
                edges: [
                    {source: 2, target: 3}
                ]
            };

在复制的示例中，链接创建是通过

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

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

              // Transition links to their new position.
              link.transition()
                  .duration(duration)
                  .attr("d", diagonal);

              // Transition exiting nodes to the parent's new position.
              link.exit().transition()
                  .duration(duration)
                  .attr("d", function(d) {
                    var o = {x: source.x, y: source.y};
                    return diagonal({source: o, target: o});
                  })
                  .remove();

我不明白，如何添加新的附加链接。有什么想法吗？

Answer 1

您可以为此使用正常的树形布局——它不限制节点之间的连接类型。基本思想是绘制所有“正常”树链接，然后分别添加级别之间的链接。对于其中的每一个，您都需要确定开始和结束节点的位置，并在它们之间画一条线。

首先，您需要解析附加边的坐标。

dataset.edges.forEach(function(e) {
  e.source = nodes[e.source];
  e.target = nodes[e.target];
});

然后，像绘制其他链接一样绘制链接。

vis.selectAll("path.linkExtra").data(dataset.edges)
   .enter().append("path")
   .attr("class", "linkExtra")
   .attr("d", diagonal");