d3 v4でリンクを見つける方法は？

Question

d3 v3で次のコードを使用して、水平のツリー（上から下）のノードとリンクを探しました。私はD3 v4の中で同じことをやろうとしている

var nodes = d3.layout.tree().nodes(jsonData).reverse(); var links = d3.layout.tree().links(nodes);

：Hereは、ツリーは次のようになります方法です。 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 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).