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
}

D3 树级选择器

D3 tree level selector

javascript

tree

jquery

d3.js