javascript - 为 D3 饼图中的特定部分分配特定颜色

Question

我使用 D3js (v4) 作为 Ember 组件构建了一个饼图/圆环图，我试图用特定颜色填充具有特定标签的段，但事实证明这很困难。

要为图表着色，我有以下代码:

marc = arc().outerRadius(radius - 10).innerRadius(radius - donutwidth),
color = scaleOrdinal().range(['#49b6d6', '#f59c1a', '#ff5b57',  '#00acac',]),

gEnter.append("path")
      .attr("d", marc)
      .attr("fill", (d, i) => {
        return color(i);
      })

以上工作正常并用选定的颜色填充弧，但不是我想要的每个弧的颜色。数组的索引是一致的，所以我尝试简单地重新排列颜色的顺序但没有效果。

我还尝试使用基于索引的 if 语句，例如:

gEnter.append("path")
          .attr("d", marc)
          .attr("fill", (d, i) => {
            if (i === 0 { return color([0]) }
       })

这确实填充了索引为 0 的段，但没有使用列表中的选定颜色。更改 color([0]) 中的数字实际上根本不会产生任何变化。如果我尝试使用基于标签字符串而不是数组索引的条件，情况也是如此。

编辑

作为为图表格式化数据的 Ember 计算属性的一部分，数据被重新排序，以便每个标签每次都以相同的顺序显示。计算出的属性如下:

//takes the ember model 'referralsource' and groups it as needed   
sourceData: groupBy('referralsource', 'label'),

//ember computed property that provides data to chart
  pieData: Ember.computed('sourceData', function() {

    let objs = this.get('sourceData')
    let sortedObjs = _.sortBy(objs, 'value')
    let newArray = []

    sortedObjs.forEach(function(x) {
      let newLabel = x.value
      let count = x.items.length
      let newData = {
        label: newLabel,
        count: count
      }
      newArray.push(newData)
    })
    return newArray
  }),

Answer 1

在你的第一个例子中，尝试改变这个:

color = scaleOrdinal().range(['#49b6d6', '#f59c1a', '#ff5b57',       '#00acac',]),

为此:

color = scaleOrdinal().range([0,4]),
color.domain(['#49b6d6', '#f59c1a', '#ff5b57', '#00acac']),

您用来指示比例尺大小的范围(在本例中为 4，因为您放置了 4 种颜色)和域指定了该比例尺每个位置的内容