如何将d3.js sunburst chart切片仅设置为红绿两色，按数值正负区分

核心实现逻辑非常简单，替换原有随机颜色生成逻辑，自定义颜色判断规则绑定到切片的fill属性即可，具体步骤如下：

• 首先确认你的层级数据经d3.partition()布局计算后，每个节点的数值字段名称，常规场景下数值默认存储在d.value字段中，可提前打印节点对象确认，避免取值错误。
• 自定义颜色映射函数，可根据需求自行调整对应色值：

// 自定义切片颜色判断函数
const getSliceColor = (node) => {
  // 根节点可单独设置颜色，不需要的话可以删除这行判断
  if (node.depth === 0) return '#f0f0f0'
  // 数值非负返回绿色，负数返回红色
  return node.value >= 0 ? '#27ae60' : '#c0392b'
}

• 找到原有切片渲染的代码段，替换fill属性的赋值逻辑即可：

// 你的旭日图切片渲染代码示例
svg.selectAll('path.sunburst-slice')
  .data(partition(root).descendants())
  .append('path')
  .attr('class', 'sunburst-slice')
  .attr('d', arcGenerator)
  // 替换原有随机色逻辑，调用自定义函数
  .attr('fill', d => getSliceColor(d))
  // 其余的样式、交互绑定代码保持原有逻辑不变

注意如果你的节点数值存储字段不是默认的d.value，需要把getSliceColor函数里的取值替换成你实际使用的字段名。
父节点的数值如果是子节点汇总得出，判断逻辑也会自动生效；如果需要父节点单独适配其他变色规则（比如按子节点正负占比调整色深），仅需修改getSliceColor内的判断逻辑即可。
如需更精细的色阶效果，可搭配d3颜色比例尺使用：正数区间用绿色系色阶，负数区间用红色系色阶，替换纯色返回值即可。

内容的提问来源于stack exchange，提问作者coder xx