D3.js从节点构造链接？

Question

I am referring to example shown there .

I can not understand how d3.js creates links from nodes. Let me explain what I understand: We have a root that js object read from file representing json; We get nodes recursively and give ids. But then occurs part that I dont understand. How d3.layout.tree().links function returns links? We only pass nodes to function, that is just ids, and coordinates of nodes?

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

Answer 1

The tree layout constructs the links by taking a hierarchical data structure (specified in the JSON) and making the links explicit. The nodes in the JSON have a children attribute that specifies, implicitly, which nodes are connected. Nodes are connected to their children and those are, in turn, connected to their children and to their parent. It is this information that the tree layout uses to compute the links.

The documentation says:

Given the specified array of nodes, such as those returned by nodes, returns an array of objects representing the links from parent to child for each node. Leaf nodes will not have any links. Each link is an object with two attributes:

source - the parent node (as described above).

target - the child node.

This method is useful for retrieving a set of link descriptions suitable for display.

Note that using the children attribute to store the children is merely the default that you can change if you like.

Answer 2

In the update() function, links = d3.layout.tree().links(nodes); is 'selecting' the nodes in the tree and their specified links in the JSON file.

I think the key here is that in the JSON file, there should be not only the nodes but also the links specified . Otherwise, one would get merely the nodes. I believe that this page should help as well.

As for what's going on later in the code, if it's helpful, please read on...

Later on, link = link.data(links, function(d) { return d.target.id; }); updates existing links to the tree.

And later on, this block of code below enters new links not currently present in the visualization.

// 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; });

I hope this helps!