Power BI中D3.js折叠树大尺寸节点重叠问题求助

问题场景 #

在Power BI中基于D3.js实现可折叠树组件，节点为宽150px、高80px的矩形框。当节点尺寸设置较大时，出现节点垂直方向重叠的问题。尝试调整separation函数和放大布局尺寸后，问题仍未解决。

核心原因 #

D3的tree.layout()默认使用size方法定义布局的整体宽高，布局会自动将节点均分在这个空间内。当节点自身尺寸超过布局分配的节点间距时，就会出现重叠。另外，原代码中手动固定每层的水平位置（d.y = d.depth * 180），但垂直方向的节点位置未考虑节点高度，导致空间不足。

解决方案 #

1. 改用nodeSize定义节点基础空间 #

替换原有的size配置，使用nodeSize直接指定每个节点占据的垂直/水平空间（包含留白），让布局自动计算整体所需尺寸，避免节点挤压：

// 替换原tree布局初始化代码
var tree = d3.layout.tree()
    .nodeSize([100, 200]); // [垂直方向空间：节点高80+20留白, 水平方向空间：节点宽150+50留白]

2. 移除手动固定的水平位置代码 #

删除update函数中手动设置节点水平位置的代码，交给nodeSize自动处理：

// 移除这行代码
// nodes.forEach(function(d) { d.y = d.depth * 180; });

3. 修正totalRevenue作用域问题 #

原代码中totalRevenue定义在update函数内，但引用了pbi.dsv回调中的data变量，存在作用域错误。将totalRevenue移至pbi.dsv回调内，并通过闭包传递给update函数：

pbi.dsv(function(data) {
    var flare = toJSON(data);
    root = flare;
    aggregateRevenue(flare);
    root.x0 = height / 2;
    root.y0 = 0;
    
    // 计算总营收，确保作用域正确
    var totalRevenue = d3.sum(data, function(d) { return d.revenue; }); 

    function collapse(d) {
        if (d.children) {
            d._children = d.children;
            d._children.forEach(collapse);
            d.children = null;
        }
    }
        
    root.children.forEach(collapse);
    
    // 修改update函数，使用闭包内的totalRevenue
    function update(source) {
        var nodes = tree.nodes(root).reverse(),
            links = tree.links(nodes);

        var node = svg.selectAll("g.node")
            .data(nodes, function(d) { return d.id || (d.id = ++i); });

        var nodeEnter = node.enter().append("g")
            .attr("class", "node")
            .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
            .on("click", click);
        
        // 后续节点渲染代码可直接使用totalRevenue
        nodeEnter.append("rect")
            .attr("width", 150)
            .attr("height", 80)
            .attr("x", -75)
            .attr("y", -40)
            .style("fill", function(d) { return d._children ? pbi.colors[0] : pbi.colors[1]; });
        
        // ... 其他节点元素渲染代码
    }

    update(root);
});

4. 优化根节点初始位置 #

确保根节点初始位置在可视区域内，避免初始渲染时节点偏移：

root.x0 = height / 2;
root.y0 = 0;

补充说明 #

• nodeSize的两个参数分别对应垂直（x轴）和水平（y轴）方向的单节点空间，可根据实际节点尺寸调整留白大小
• 若需要更精细的节点间距控制，可结合separation函数，比如：

  var tree = d3.layout.tree()
      .nodeSize([100, 200])
      .separation(function(a, b) {
          return a.parent === b.parent ? 1.2 : 0.8; // 同父节点的子节点间距放大1.2倍，不同父节点的缩小到0.8倍
      });
  

内容的提问来源于stack exchange，提问作者Hammad Ahmed