如何在d3 v4中找到链接？

Question

我在d3 v3中使用了以下代码来查找水平树（从上到下）的节点和链接。这是树的样子：

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).