d3.js - 如何在 d3 v4 中找到链接？

Question

我在 d3 v3 中使用了以下代码来查找水平树的节点和链接(从上到下)。 Here是树的样子:
var nodes = d3.layout.tree().nodes(jsonData).reverse();
var links = d3.layout.tree().links(nodes);
我正在尝试在 d3 v4 中做同样的事情。 v4 缺少可以接受节点的 tree.links(nodes) 方法。

如何在 d3 v4 中找到链接？

Answer 1

我只是添加这个来节省我自己(可能还有其他人)从演示中挖掘答案的时间。我也是 D3 的新手，所以我希望这对其他人和我一样有帮助。

使用 d3.hierarchy() & node.descendants()获取节点和链接。

// Assigns parent, children, height, depth, etc..
var root = d3.hierarchy(jsonData);

// Assigns the x and y coordinates for the nodes.
tree(root);

// Returns array of node objects.
var nodes = root.descendants();

// Returns array of link objects between nodes.
var links = root.descendants().slice(1);
//var links = root.links(); // to get objects with source and target properties.

如果需要，也可以将其缩短一点，这仍然可以完成上述所有操作。

var root = d3.hierarchy(jsonData),
    nodes = tree(root).descendants(),
    links = nodes.slice(1);

如果您需要在事件中获取节点/链接。例如，在使用树图时拖动节点开始(我相信这在其他地方也很有用)。

var drag = d3.drag()
    .on("start", function dragStart(d) {
        var nodes = d.descendants(),
            links = nodes.slice(1);
    });

或者使用 node.links()其中每个链接定义源和目标属性。

var drag = d3.drag()
    .on("start", function dragStart(d) {
        var nodes = d.descendants(),
            links = d.links(); 
    });

你会认为这也适用于这种情况，但它没有(无赖)。

var root = d3.hierarchy(jsonData),
    nodes = tree(root).descendants(),
    links = nodes.links(); // <-- only works on a single node, resort to slice(1).