D3 v4（树形图） - 给定动态节点数

Question

我动态地改变了树形图的数据，并且不知道SVG的高度应该是多少。如何计算树形图的高度以更新SVG尺寸？

小提琴示例：https://jsfiddle.net/intelligence_ai/guesukv6/

请查看fiddle上的代码，因此我要求使用小提琴链接发布一些代码：

var treemap = d3.tree().nodeSize([40, 40]);

root = d3.hierarchy(data, function(d) { return d.children; });
root.x0 = 100;
root.y0 = 0;
function update(source) {

  // Assigns the x and y position for the nodes
  var data = treemap(root);

  // Compute the new tree layout.
  var nodes = data.descendants(),
      links = data.descendants().slice(1);

  // Normalize for fixed-depth.
  let connectorLength = 200; // the length of the lines in pixels
  nodes.forEach(function(d){ d.y = d.depth * connectorLength});

nodes = nodes.filter(function(d){
return d.depth != 0;
})
...

Answer 1

由于您指定[40,40]为var height = 40 * 129; 并且您有129个节点，因此高度应为：

var height = treemap.nodeSize()[1] * nodes.length;

由于你想要计算动态，它应该是：

tree.nodeSize

此外，在指定0,0时，根节点将位于.attr("transform", "translate("+ margin.left + "," + (height/2) + ")"); 。因此，您必须翻译主要组：

ln -s source destination

这是更新的小提琴：https://jsfiddle.net/jxw0Ld3c/