时间戳

首页 > 解决方案 > d3.js - 树状图显示调整为树形图

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

问题描述

我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;

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

正确显示的示例：Codepen good_display

显示不正确的示例：Codepen 坏显示

标签： d3.jsdendrogram

解决方案

让我们解决这个问题，您需要先知道内容的边界框，然后调整 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]);

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

推荐阅读