D3 v4 的 tree.links()答案

【问题标题】：tree.links() for D3 v4D3 v4 的 tree.links()
【发布时间】：2017-11-15 02:40:17
【问题描述】：

我一直在看一个关于 d3 的教程，但它显示了一些在 v4 上不再使用的过时代码。我想知道 D3 v4 的 var links = tree.links(nodes); 的更新语法是什么？

如果有人好奇，这是教程的链接。 https://www.youtube.com/watch?v=iZ6MSHA4FMU&list=PL6il2r9i3BqH9PmbOf5wA5E1wOG3FT22p&index=15

【问题讨论】：

在 v3 中是tree.links()，而不是tree.link()。我刚刚编辑了标题。

标签： javascript d3.js

【解决方案1】：

您必须在层次结构上调用links()。

changelog 谈到了这一变化：

要为给定的层次结构生成一个 {source, target} 链接数组，请使用node.links；这将替换 tree.links 和其他布局上的类似方法。

这是一个基本演示（使用浏览器的控制台，而不是 Stack sn-p 控制台）：

var data = {
  "name": "Eve",
  "children": [{
    "name": "Cain"
  }, {
    "name": "Seth",
    "children": [{
      "name": "Enos"
    }, {
      "name": "Noam"
    }]
  }, {
    "name": "Abel"
  }, {
    "name": "Awan",
    "children": [{
      "name": "Enoch"
    }]
  }, {
    "name": "Azura"
  }]
};

var hierarchy = d3.hierarchy(data);

var tree = d3.tree();

var links = tree(hierarchy).links();

console.log(links)

&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;

【讨论】：