D3.js-Dendrogram显示调整到树形图

Question

使用d3.js，我创建了d3树状图来可视化对象之间的层次关系。图的尺寸和边距是用固定的高度和宽度定义的。

var width = 1000,
    height = 800,
    boxWidth = 150,
    boxHeight = 35,
    gap = {
        width: 50,
        height: 12
    },
    margin = {
        top: 16,
        right: 16,
        bottom: 16,
        left: 16
    },
    svg;

有几个关系，显示是可以的，但与许多关系它不适合，图形是‘切’，我不能看到整个图。如何动态设置此宽度和高度属性并根据图形的大小进行调整？

一个正确显示的示例：科德芬

​

显示不正确的示例：科德芬

​

Answer 1

让我们解决这个问题，您需要首先了解内容的边框，然后调整svg大小。要做到这一点，在这种情况下，您只需查看框或节点，就可以忽略链接。

考虑到这一点，您可以在您的Nodes函数中填充renderRelationshipGraph并返回计算值之后执行以下操作：

function renderRelationshipGraph(data) {

    // ...

    var bbox = Nodes.reduce(function (max, d)
    {
      var w = d.x + boxWidth;
      var h = d.y + boxHeight;
      if (w > max[0]) {max[0] = w}
      if (h > max[1]) {max[1] = h}
      
      return max                               
    }, [0,0])

    return bbox
}

然后对主代码进行更改，使用它更新svg的高度和宽度：

svg = d3.select("#tree").append("svg")
    .attr("width", width)
    .attr("height", height);
    
    svg.append("g");
    
    var bbox = renderRelationshipGraph(data);
      svg.attr("width", bbox[0])
      .attr("height", bbox[1]);

您可以添加一个转换并限制高度，但是这样做的结果非常大。