D3.js 可折叠树：为每个级别添加标签

Question

我正在开发一个项目，需要为 D3.js 中可折叠树的每个级别添加标签（https://bl.ocks.org/mbostock/4339083）。我在添加同样的内容时面临着困难。我需要的标签已添加在所附的屏幕截图中。单击每个级别后，标签应立即填充每个级别，并在树回滚时消失。谁能帮我解决这个问题。

Answer 1

修改更新方法以跟踪节点项的级别。维护用于绘制图表的节点项中所有深度值的唯一排序哈希。获得排序后的深度哈希数组后，将文本绘制在图表顶部。下面是我修改过的小提琴供您参考。\n http://jsfiddle.net/deepakpster/vomxqxov/3/

\n\n

var margin = {top: 20, right: 120, bottom: 20, left: 120},\n    width = 960 - margin.right - margin.left,\n    height = 800 - margin.top - margin.bottom;\n\nvar i = 0,\n    duration = 750,\n    root;\n\nvar tree = d3.layout.tree()\n    .size([height, width]);\n\nvar diagonal = d3.svg.diagonal()\n    .projection(function(d) { return [d.y, d.x]; });\n\nvar svg = d3.select("body").append("svg")\n    .attr("width", width + margin.right + margin.left)\n    .attr("height", height + margin.top + margin.bottom)\n  .append("g")\n    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");\n\nflare = "http://rawgit.com/mbostock/1093025/raw/a05a94858375bd0ae023f6950a2b13fac5127637/flare.json"\nd3.json(flare, function(error, flare) {\n  root = flare;\n  root.x0 = height / 2;\n  root.y0 = 0;\n\n  function collapse(d) {\n    if (d.children) {\n      d._children = d.children;\n      d._children.forEach(collapse);\n      d.children = null;\n    }\n  }\n\n  root.children.forEach(collapse);\n  update(root);\n});\n\nd3.select(self.frameElement).style("height", "800px");\n\nfunction update(source) {\n\n  // Compute the new tree layout.\n  var nodes = tree.nodes(root).reverse(),\n      links = tree.links(nodes);\n\n  // Normalize for fixed-depth.\n  nodes.forEach(function(d) { d.y = d.depth * 180; });\n    // Showing the labels for the level of depths.\n    // Using underscore.js to do the pluck, uniq.\n  var depthHash = _.uniq(_.pluck(nodes, "depth")).sort();\n  svg.selectAll("g.levels-svg").remove();\n  var levelSVG = svg.append("g").attr("class", "levels-svg");\n    var levels =  levelSVG.selectAll("g.level");\n  levels.data(depthHash)\n    .enter().append("g")\n    .attr("class", "level")\n    .attr("transform", function(d) { return "translate(" + d*180 + "," + 10 + ")"; })\n    .append("text")\n    .text(function(d){\n      return "level-" + d; \n    });\n\n  // Update the nodes\xe2\x80\xa6\n  var node = svg.selectAll("g.node")\n      .data(nodes, function(d) { return d.id || (d.id = ++i); });\n\n  // Enter any new nodes at the parent\'s previous position.\n  var nodeEnter = node.enter().append("g")\n      .attr("class", "node")\n      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })\n      .on("click", click);\n\n  /*  \n  nodeEnter.append("circle")\n      .attr("r", 1e-6)\n      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });\n  */\n  var ww = 30, hh = 20\n  nodeEnter.append("rect")\n    .attr("height", 1e-6)\n    .attr("width", 1e-6)\n    .attr("x", -ww/2)\n    .attr("y", -hh/2)\n    .attr("rx", 3)\n    .attr("ry", 3)\n    .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });\n\n  nodeEnter.append("text")\n      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })\n      .attr("dy", ".35em")\n      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })\n      .text(function(d) { return d.name; })\n      .style("fill-opacity", 1e-6);\n\n  // Transition nodes to their new position.\n  var nodeUpdate = node.transition()\n      .duration(duration)\n      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });\n\n  nodeUpdate.select("rect")\n    .attr("width", ww)\n    .attr("height", hh)\n    .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });\n\n  nodeUpdate.select("circle")\n      .attr("r", 4.5)\n      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });\n\n  nodeUpdate.select("text")\n      .attr("dx", -10)\n      .style("fill-opacity", 1);\n\n  // Transition exiting nodes to the parent\'s new position.\n  var nodeExit = node.exit().transition()\n      .duration(duration)\n      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })\n      .remove();\n\n  nodeExit.select("circle")\n      .attr("r", 1e-6);\n\n  nodeExit.select("text")\n      .style("fill-opacity", 1e-6);\n\n  // Update the links\xe2\x80\xa6\n  var link = svg.selectAll("path.link")\n      .data(links, function(d) { return d.target.id; });\n\n  // Enter any new links at the parent\'s previous position.\n  link.enter().insert("path", "g")\n      .attr("class", "link")\n      .attr("d", function(d) {\n        var o = {x: source.x0, y: source.y0};\n        return diagonal({source: o, target: o});\n      });\n\n  // Transition links to their new position.\n  link.transition()\n      .duration(duration)\n      .attr("d", diagonal);\n\n  // Transition exiting nodes to the parent\'s new position.\n  link.exit().transition()\n      .duration(duration)\n      .attr("d", function(d) {\n        var o = {x: source.x, y: source.y};\n        return diagonal({source: o, target: o});\n      })\n      .remove();\n\n  // Stash the old positions for transition.\n  nodes.forEach(function(d) {\n    d.x0 = d.x;\n    d.y0 = d.y;\n  });\n}\n\n// Toggle children on click.\nfunction click(d) {\n  if (d.children) {\n    d._children = d.children;\n    d.children = null;\n  } else {\n    d.children = d._children;\n    d._children = null;\n  }\n  update(d);\n}\n

\n