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

D3 adapt force layout for tree structure with additional parent and sibling paths

本文关键字：路径 结构 布局 调整 D3      更新时间：2023-11-02

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

我指的是这样的人：

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

我认为这是一个"正常"的图形结构，但我必须像树一样自上而下地将其可视化。大概http://bl.ocks.org/GerHobbelt/3683278这将是一个很好的起点，但我如何告诉部队布局，使节点像树一样更清晰？

编辑：我的数据如下：

{
 "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"answers"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();

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

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

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

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");
相关文章：