D3 v4的tree.links() [英] tree.links() for D3 v4

问题描述

我一直在观看有关d3的教程，但其中显示了一些过时的代码，这些代码已不再在v4上使用.我想知道D3 v4的var links = tree.links(nodes);的更新语法是什么?

I've been watching a tutorial on d3 but it shows some outdated code that is no longer used on v4. I was wondering what would be the updated syntax for var links = tree.links(nodes); for D3 v4?

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

If anybody is curious, this is the link to the tutorial. https://www.youtube.com/watch?v=iZ6MSHA4FMU&list=PL6il2r9i3BqH9PmbOf5wA5E1wOG3FT22p&index=15

推荐答案

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

You have to call links() on the hierarchy.

更改日志讨论了此更改:

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

To generate an array of {source, target} links for a given hierarchy, use node.links; this replaces tree.links and similar methods on the other layouts.

这是一个基本的演示(使用浏览器的控制台，而不是Stack代码段控制台):

Here is a basic demo (use the console of your browser, not the Stack snippet console):

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)

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

这篇关于D3 v4的tree.links()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！