javascript - 如何在 D3.js 中创建领结方法/图表？

Question

我目前正在开展一个项目，我需要根据来自应用程序的数据创建领结​​图。

从一些研究来看，看起来最好的库是 D3.js

我玩过/看过这些例子:

可折叠树:https://observablehq.com/@d3/collapsible-tree

层次结构图:https://bl.ocks.org/willzjc/a11626a31c65ba5d319fcf8b8870f281

这是我想尝试复制的基本领结图示例:

正如您在图片中看到的那样 - 我需要多个顶级项目和/或可以独立打开每一侧/树的双树，数据从左到右(红色侧)和从右到左(蓝色侧)流动顶级项目。

这可以使用 D3.js 实现吗？

关于 d3.js 的教程只涵盖标准图表，如条形图和我在网上发现的只有 1 个顶级项目的树示例。

任何正确方向的帮助、建议或指示将不胜感激。

Answer 1

有一些有用的 Material 需要考虑:

1. Tree drawing orientation - 链接到一个 block ，显示从左到右的方向可以通过改变节点的 x 和 y 坐标的使用来实现
2. Similar question to yours - 接受的答案是将两棵树分成两部分 <g> s 并移动一个“over”
3. Simple D3 v6 example - v6 很有用，因为它允许 Array.from从 d3.tree 中获取节点列表无需遍历层次结构的方法。

第二个与您的问题不太相似，因此改编第三个以使用第一个的原则:

• 你想要两棵树——一棵从根部从左到右，一棵从根部从右到左
• d3.tree 方法有效地计算出正确的 x s 和 y s 用于节点的定位(“水平”渲染除外，您在 Mike Bostock block 的代码中翻转使用 x 和 y)。我们希望保持对节点之间相对位置的理解，但同时对 RH 树(g 的中心)和 LH 树(g 的中心垂直向左翻转)进行翻译。
• 异常(exception)是根节点，例如在“左”与“右”上有更多节点的地方，根的位置会略有不同。您必须为两棵树选择一个根节点。
• 您可以重新计算坐标，以便:
  • 在右边的树中，y坐标(现在表示 x )应该有 width / 2添加以将它们移动到 g 的垂直中心然后减半以将“分支”长度保持在 width 范围内.
  • 在左边的树中，y坐标(现在表示 x )应该减半(RH 树中的“分支长度”相同)并取反以将节点位置翻转到根节点的左侧(您选择选择的位置，例如 LH 树的根位置)。

这是演示:

// useful links
// https://bl.ocks.org/mbostock/3184089
// https://bl.ocks.org/d3noob/72f43406bbe9e104e957f44713b8413c

var treeDataL = {
  "name": "Root",
  "children": [
    {
      "name": "L_A_1",
      "children": [
        {"name": "L_B_1"},
        {"name": "L_B_2"}
      ]
    },
    {
      "name": "L_A_2",
      "children": [
        {"name": "L_B_3"},
        {"name": "L_B_4"}
      ]
    }
  ]
}

var treeDataR = {
  "name": "Root",
  "children": [
    {
      "name": "R_A_1",
      "children": [
        {"name": "R_B_1"},
        {"name": "R_B_2"},
        {"name": "R_B_3"}
      ]
    },
    {
      "name": "R_A_2",
      "children": [
        {"name": "R_B_3"},
        {"name": "R_B_4"},
        {"name": "R_B_5"},
        {"name": "R_B_6"}
      ]
    }
  ]
}

// set the dimensions and margins of the diagram
var margin = {top: 50, right: 50, bottom: 50, left: 50},
  width = 400 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

// declares a tree layout and assigns the size
var tree = d3.tree()
  .size([width, height]);

// create 2x trees using d3 hierarchy
// this is where the computation of coordinates takes place
var nodesL = tree(d3.hierarchy(treeDataL));
var nodesR = tree(d3.hierarchy(treeDataR));

// get arrays of nodes - need v6
nodesLArray = Array.from(nodesL); 
nodesRArray = Array.from(nodesR); 

// switch out nodesR root for nodesL
// here the choice is to assign coords of root of LH tree to RH
nodesLRoot = nodesLArray.find(n => n.data.name == "Root");
nodesRRoot = nodesRArray.find(n => n.data.name == "Root");
nodesRRoot.x = nodesLRoot.x;
nodesRRoot.y = nodesLRoot.y;

// this is kinda like the 'important bit'
// REMEMBER for horizontal layout, flip x and y...
// LH: halve and negate all y's in nodesL add width / 2
nodesLArray.forEach(n => n.y = ((n.y * 0.5) * -1) + width / 2);
// RH: halve and add width / 2 to all y's nodesR  
nodesRArray.forEach(n => n.y = (n.y * 0.5) + width / 2);

// now sticking a bit more closely to the tutorial in link 3
// append svg 
var svg = d3.select("body")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom);

// align g with margin
var g = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// render both trees
[nodesL, nodesR].forEach(function(nodes, i) {

// adds the links between the nodes
// need to select links based on index to prevent bad rendering
var link = g.selectAll(`links${i}`)
  .data( nodes.descendants().slice(1))
  .enter()
  .append("path")
  .attr("class", `link links${i}`) // note two classes
  .attr("d", function(d) {
    // x and y flipped here to achieve horizontal placement
    return `M${d.y},${d.x}C${d.y},${(d.x + d.parent.x) / 2} ${d.parent.y},${(d.x + d.parent.x) / 2} ${d.parent.y},${d.parent.x}`
  });

// adds each node as a group
// need to select nodes based on index to prevent bad rendering
var node = g.selectAll(`.nodes${i}`)
  .data(nodes.descendants())
  .enter()
  .append("g")
  .attr("class", `node nodes${i}`) // note two classes
  .attr("transform", function(d) { 
    // x and y flipped here to achieve horizontal placement
    return `translate(${d.y},${d.x})`;
  });

// adds the circle to the node
node.append("circle")
  .attr("r", 10);

// adds the text to the node
node.append("text")
  .attr("dy", ".35em")
  .attr("y", function(d) { return d.children ? -20 : 20; })
  .style("text-anchor", "middle")
  .text(function(d) { return d.data.name; });

});

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 3px;
}

.node text {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}

<script src="https://d3js.org/d3.v6.min.js"></script>

该演示是基本的，您可能需要查看 tree.nodeSize 实现节点放置容纳包含文本等的框。我认为更新y的原则(为 x )坐标仍然适用于翻转 LH 树。