vue-d3-sunburst实现D3 Sunburst旭日图自定义路径颜色映射问题

修改步骤 #

1. 实现getColorValue方法，读取D3节点中的原始color属性

methods: {
  getColorValue(nodeD3) {
    // nodeD3.data 为你传入的原始节点配置，直接返回color字段即可，缺省值兜底避免报错
    return nodeD3.data.color || '#999999'
  }
}

2. 修正sunburst组件的属性绑定：

• 去掉getCategoryForColor绑定的括号，直接传入函数引用
• 新增colorScale属性，直接返回传入的色值，跳过组件默认的分类转色逻辑

<sunburst
  class="flavor-wheel"
  :data="data"
  :showLabels="true"
  :centralCircleRelativeSize="10"
  :getCategoryForColor="getColorValue"
  :colorScale="val => val"
>
  <template slot-scope="{ on, actions }">
    <highlightOnHover v-bind="{ on, actions }" />
  </template>
</sunburst>

原代码问题说明 #

你之前的写法存在两处错误：

• 给getCategoryForColor传入的是getColorValue()的执行结果（空值），而组件要求传入一个函数用来逐个处理每个节点
• 组件默认会把getCategoryForColor的返回值当做分类标识，去内置色板中匹配颜色，不会直接当做色值使用，因此需要添加colorScale="val => val"配置让组件直接使用返回的十六进制色值

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