javascript - VueJS 动态条形图颜色

Question

给定一个包含 2 个数据集的条形图。如何为每个条形指定自己的颜色？

svg.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .style("fill", function(d,i) { console.log(i.fill) }  // <- first red, second blue

Answer 1

我懒得设置一个我认为可行的演示，但我想你想要一组颜色，例如:

var colors = ['red', 'blue'];

然后在 fill 的回调中，您可以这样做:

return colors[i % colors.length];

如果我正确地假设 i 是您所在的 bar 的索引。