D3树级选择器

Question

我可以为使用d3.js创建的树添加一个关卡选择器吗？

http://bl.ocks.org/mbostock/2966094 要么 bl.ocks.org/mbostock/4339083

在每个级别添加标签以获取关卡位置或展开它。

添加了示例图片。

Answer 1

以此为例：http://bl.ocks.org/mbostock/4339083

我首先按级别嵌套节点：

var nodesByLevel = d3.nest().key(function (d) {return d.depth}).entries(nodes);

要添加方框，请执行以下操作：

svg.selectAll(".levelBox")
  .data(nodesByLevel)
  .enter()            // one box per level
  .append("text")
  .attr("class","levelBox")
  .attr("x", function (d) {return d.values[0].x}) //take the x of the first node in this layer
  .text(function(d) {return d.key}) //the key from the nesting, i.e. the depth      
  .onclick(levelExpand);  // click handler

上面只是一个骨架，应该进入update功能（添加数据后需要处理exit()和update()选项，以及任何其他绘图的功能）。

在levelExpand中，您可以访问所点击框的节点列表（在d.values中）。然后，您可以浏览列表，展开它们，然后更新图形

function levelExpand(d) {
    d.values.forEach(function (n) {n.children = n._children;}); //expand all nodes internally
   update(root); //show the update
}