Question

我正在使用d3绘制一个饼图，并使用以下内容填充具有特定颜色的切片：

d3.scale.ordinal().domain([]).range(['#2ECC71', '#208E4E', '#12512C', '#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'])

当将一个饼图换成另一个饼图时，我的问题就出现了，这实际上只是一个数据交换。这样做时，不是从'＃2ECC71'开始的新饼，而是从较晚的颜色值开始，具体取决于有多少片;例如如果使用了两个切片，则数据交换后的“新”饼将从“＃12512c”开始。

js framework：Vue.js d3版本：v3

干杯。

Answer 1

我想你会调用scale函数并传递value。如果您有类别键或数据数组索引键，您将获得一致的结果。

请参阅下面的示例，将假装值传递给scale函数每次都会返回新的颜色值。因为它为密钥分配了一个新值。传递相同的值（string或int）时，始终返回相同的结果。

let colorScale = d3.scale.ordinal().domain([]).range(['#2ECC71', '#208E4E', '#12512C', '#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'])

// new colour for each value
console.log(colorScale(50))
console.log(colorScale(10))
console.log(colorScale(100))

// new colours for each index
console.log(0, colorScale(0))
console.log(1, colorScale(1))
console.log(2, colorScale(2))

// using the colours already assigned to keys 0,1
console.log(0, colorScale(0))
console.log(1, colorScale(1))

// alternatively use category key values
console.log('Africa', colorScale('Africa'))
console.log('Africa', colorScale('Africa'))

console.log('America', colorScale('America'))
console.log('Australia', colorScale('Australia'))

console.log('America', colorScale('America'))
console.log('Australia', colorScale('Australia'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

d3-在数据更改时重置色标

1 个答案: