代码之家  ›  专栏  ›  技术社区  ›  Ron I

D3 v4(树形图)-在给定动态节点数的情况下,动态计算SVG的高度

  •  1
  • Ron I  · 技术社区  · 8 年前

    我动态地更改了树形图的数据,不知道SVG的高度应该是多少。如何计算树形图的高度来更新SVG维度?

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

    请查看 fiddle ,因此需要我发布一些带有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;
    })
    ...
    

    enter image description here

    1 回复  |  直到 8 年前
        1
  •  3
  •   Gerardo Furtado    8 年前

    由于您指定 nodeSize [40,40]

    var height = 40 * 129;
    

    既然你想计算它 动态地 ,它应该是:

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

    此外,在指定时 tree.nodeSize 0,0 . 因此,您必须翻译主要组:

    .attr("transform", "translate("+ margin.left + "," + (height/2) + ")");
    

    以下是更新的小提琴: https://jsfiddle.net/jxw0Ld3c/