D3 树级选择器答案

【问题标题】：D3 tree level selectorD3 树级选择器
【发布时间】：2016-05-20 08:45:43
【问题描述】：

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

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

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

添加了示例图片。

【问题讨论】：

第二个例子更合适：在第一个例子中，不能保证任何级别都是垂直对齐的。无论如何，我不认为有任何开箱即用的解决方案......

标签： javascript jquery d3.js tree

【解决方案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
}

【讨论】：