如何使用d3.js在sunburst旭日图中正常显示负数值对应扇区

核心原因 #

d3.hierarchy的sum()方法默认计算节点权重时，会将负数作为0处理，对应节点的起始角度x0和结束角度x1相等，触发arcVisible方法中的d.x1 > d.x0判断不成立，因此切片被隐藏。同时你的示例数据中负数value是字符串类型，也会导致数值计算异常。

具体修改步骤 #

1. 重写partition计算逻辑 #

使用绝对值计算弧长权重，同时保留真实数值用于后续颜色、文本展示：

partition = data => {
    const root = d3.hierarchy(data)
        // 统一转数字格式，保存真实值，用绝对值计算弧长
        .sum(d => {
            d.actualValue = Number(d.value) || 0;
            return Math.abs(d.actualValue);
        })
        // 排序也按绝对值比较
        .sort((a, b) => Math.abs(b.actualValue) - Math.abs(a.actualValue));
    return d3.partition()
        .size([2 * Math.PI, root.height + 1])
        (root);
}

2. 调整颜色判断逻辑 #

使用预处理好的数值字段避免类型错误：

.attr('fill', function (d, i) {
    if (d.actualValue > 10) {
        return 'green'
    } else if (d.actualValue < 5 && d.actualValue >= 0) {
        return 'red'
    } else if (d.actualValue < 1) {
        return 'lightgreen'
    }
    return color(i)
})

3. 修正文本显示逻辑 #

展示真实数值：

.text(d => d.data.name + '\n' + d.actualValue);

4. 修复示例数据错误 #

删除data定义末尾多余的斜杠，可将字符串类型的负数值直接改为数字格式减少转换开销。
修改完成后所有节点都会按绝对值分配弧长，正负仅影响颜色和数值显示，不会再出现切片隐藏的问题。

内容的提问来源于stack exchange，提问作者F Nasir