求助：D3.js树形图仅根节点显示仪表盘指针问题

问题根源 #

你的代码中指针角度使用固定值87，且未将指针组件与每个节点的pointerValue数据关联，导致指针逻辑无法针对每个节点生效，仅根节点的指针能正常显示。

修复步骤 #

1. 调整指针组的数据绑定 #

修改指针组的绑定逻辑，让每个指针组件能访问到对应节点的数据：

var pg = vis.append('g')
        .attr('class', 'pointer')
        .attr('transform', centerTranslation(r))
        // 绑定节点数据与指针路径数据，确保后续能获取pointerValue
        .data(function(d) { return [{nodeData: d, lineData: lineData}]; });

2. 基于节点的pointerValue计算指针角度 #

替换固定角度计算代码，从当前节点数据中读取pointerValue并计算对应角度：

pg.append('path')
    .attr("d", function(d) { return d3.line().curve(d3.curveLinear)(d.lineData); })
    .attr("stroke", "black")
    .attr('transform', 'rotate(' + config.minAngle + ')')
    .transition()
    .duration(config.transitionMs)
    .ease(d3.easeElastic)
    .attr('transform', function(d) {
        // 将字符串类型的pointerValue转为数值
        var value = +d.nodeData.data.pointerValue;
        var ratio = scale(value);
        var newAngle = config.minAngle + (ratio * range);
        return 'rotate(' + newAngle + ')';
    });

3. 补充节点圆形元素（可选） #

原代码未添加节点圆圈，可在nodeEnter.append('text')后补充，完善节点视觉效果：

nodeEnter.append('circle')
    .attr('class', 'node')
    .attr('r', 10)
    .style("fill", function(d) {
        return d._children ? "lightsteelblue" : "#fff";
    });

完整修复后的关键代码片段 #

// 创建指针组并绑定节点数据
var pg = vis.append('g')
        .attr('class', 'pointer')
        .attr('transform', centerTranslation(r))
        .data(function(d) { return [{nodeData: d, lineData: lineData}]; });

// 渲染指针并关联节点的pointerValue
pg.append('path')
    .attr("d", function(d) { return d3.line().curve(d3.curveLinear)(d.lineData); })
    .attr("stroke", "black")
    .attr('transform', 'rotate(' + config.minAngle + ')')
    .transition()
    .duration(config.transitionMs)
    .ease(d3.easeElastic)
    .attr('transform', function(d) {
        var value = +d.nodeData.data.pointerValue;
        var ratio = scale(value);
        var newAngle = config.minAngle + (ratio * range);
        return 'rotate(' + newAngle + ')';
    });

效果说明 #

修复后，每个节点的仪表盘指针会根据自身JSON数据中的pointerValue属性定位，所有节点的指针都会正常显示，并保留原有弹性过渡动画。

内容的提问来源于stack exchange，提问作者Luana Faria Fernandes