Question

I am referring to example shown there

我无法理解d3.js如何从节点创建链接。让我解释一下我的理解：我们有一个根js对象从表示json的文件中读取;我们递归地获取节点并给出id。但后来发生了我不明白的部分。 d3.layout.tree（）。links函数如何返回链接？我们只将节点传递给函数，即只是ids和节点的坐标？

    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属性，该属性隐式指定连接的节点。节点与他们的孩子相连，而这些节点又与他们的孩子和他们的父母相连。树布局用于计算链接的是此信息。

documentation说：

给定指定的节点数组（例如节点返回的节点），返回一个对象数组，表示每个节点从父节点到子节点的链接。叶节点不会有任何链接。每个链接都是一个具有两个属性的对象：

source - 父节点（如上所述）。

target - 子节点。

此方法对于检索适合显示的一组链接描述非常有用。

请注意，使用children属性存储子项只是您可以根据需要更改的默认值。

Answer 2

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

我认为这里的关键是JSON文件中的，不仅应该有节点，还应该指定链接。否则，人们只会获得节点。我相信this page也应该有所帮助。

至于代码后面会发生什么，如果它有用，请继续阅读...

稍后，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; });

我希望这有帮助！

D3.js从节点构建链接？

2 个答案: