version
d3.jsのversionは4.1.0です。
シンプルなTree図を用意
d3.js version4でシンプルなTree図を作成 - Qiita
Code
depthとheight
depthはrootからの深さを、heightは葉(末端)からの距離を表します。depthとheightを使っていろいろ試してみます。
node.depth - zero for the root node, and increasing by one for each descendant generation
node.height - zero for leaf nodes, and the greatest distance from any descendant leaf for internal nodes
d3/d3-hierarchy: 2D layout algorithms for visualizing hierarchical data.
depthを指定
Link.js
this.element = parentSvg.selectAll(".link")
.data(root.descendants().slice(1).filter(function(d) {
return d.depth > 1;
}))
descendantsを使い、最も上の階層であるrootの子要素をすべて配列で取得します。それをfilterを使って、depthが1より大きいと指定します。
すると、深さが1より大きい部分だけpathが引かれました。
heightを指定
MyNode.js
this.element = parentSvg.selectAll(".node")
// .data(root.descendants())
.data(root.descendants().filter(function(d) {
return d.height >= 1;
}))
filterを使ってheightを1以上に指定します。
葉はheight=0なので葉が消えます。