d3.js - 树状图显示调整为树图

Question

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

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

对于一些关系，显示还可以，但对于许多关系，它不适合，图表被“剪切”，我看不到整个图表。如何动态设置此宽度和高度属性并调整到图形的大小？

显示正确的示例：Codepen

显示不正确的示例：Codepen

Answer 1

让我们解决这个问题，您需要先知道内容的边界框，然后再调整 svg 大小。为此，在这种特殊情况下，您只需查看框或节点即可忽略链接。

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

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]);

您可以添加过渡并限制高度，但这可以满足您的要求，最终结果非常大。