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;

对于一些关系，显示正常，但对于许多关系，它不适合，图表是 'cut'，我看不到整个图表。如何动态设置此宽度和高度属性并调整到图形的大小？

正确显示的示例：Codepen

显示不正确的示例：Codepen

Answer 1

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

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


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

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

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

d3.js - Dendrogram display adjusted to the tree diagram

dendrogram