javascript - 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
}