我使用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])中的数字实际上根本没有任何变化。如果我尝试使用基于Label字符串而不是数组索引的条件语句,情况也是如此。
编辑
作为Ember Computed Property的一部分,用于为图表格式化数据,数据被重新排序,以便每个标签每次呈现时都按相同的顺序呈现。计算属性如下所示:
//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
}),