关于d3.js：如何在D3折线图中自定义色阶？


How to customize the color scale in a D3 line chart?

如何更改d3折线图中的线条颜色，例如Mike Bostock的多系列D3折线图中。

在他的示例图表中，Mike Bostock按照以下代码行使用D3内置的" category10"色标：

1
var color = d3.scale.category10();

但是，假设我们希望将奥斯汀的线条改为蓝色，将纽约的线条设为红色，将旧金山的线条设为绿色，而不是内置的比例尺。 应该足够简单吧？ 只需定义一个自定义色标：

1
2
3
var color = d3.scale.ordinal()
    .domain(["New York","San Francisco","Austin"])
    .range("#FF0000","#009933" ,"#0000FF");

我以为可以解决问题，但是所有系列都变黑了。 我尝试过通过将类附加到每个系列来对CSS进行样式设置，但这没有用。

相关讨论

您只缺少.range()中值周围的方括号-它需要一个数组作为参数。 所以代码应该是

1
2
3
var color = d3.scaleOrdinal() // D3 Version 4
  .domain(["New York","San Francisco","Austin"])
  .range(["#FF0000","#009933" ,"#0000FF"]);

在此处完整示例。

相关讨论

对于D3 v4

1
2
3
   let color = d3.scaleOrdinal()
      .domain(["New York","San Francisco","Austin"])
      .range(["#FF0000","#009933" ,"#0000FF"]);