从节点构建链路的D3.js？

Question

我指的是这里的例子。。

我无法理解d3.js如何从节点创建链接。让我解释一下我所理解的:我们有一个根，js对象从表示json的文件中读取；我们递归地获取节点并提供ids。但后来发生了一些我不明白的部分。d3.layout.tree().links函数如何返回链接？我们只传递节点到函数，也就是is，以及节点的坐标？

    d3.json("graph.json", function(error, json) {
    root = json;
    update();
    });
    function update() {
    var nodes = flatten(root), 
    links = d3.layout.tree().links(nodes);

Answer 1

树布局通过采用分层数据结构(在JSON中指定)并使链接显式来构造链接。JSON中的节点具有一个children属性，该属性隐式地指定连接哪些节点。节点被连接到他们的子节点，而这些节点又连接到他们的孩子和他们的父节点。这是树布局用来计算链接的信息。

文档说：

给定指定的节点数组(如节点返回的节点)，则返回表示每个节点从父节点到子节点的链接的对象数组。叶节点将没有任何链接。每个链接都是一个具有两个属性的对象： 源-父节点(如上文所述)。 目标-子节点。 这种方法对于检索一组适合显示的链接描述是有用的。

请注意，使用children属性来存储子属性只是默认的，如果您愿意，可以进行更改。

Answer 2

在update()函数中，links = d3.layout.tree().links(nodes);在“选择”树中的节点以及它们在JSON文件中的指定链接。

我认为这里的关键是JSON文件中的，不仅应该有节点，而且还应该有指定的链接。否则，人们只会得到节点。我认为此页也应该提供帮助。

至于代码后面发生了什么，如果有用的话，请阅读.

稍后，link = link.data(links, function(d) { return d.target.id; });更新到树的现有链接。

稍后，下面的代码块进入可视化中当前未出现的新链接。

// Enter any new links.
  link.enter().insert("line", ".node")
      .attr("class", "link")
      .attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

我希望这能帮到你!