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

Question

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

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

var color = d3.scale.category10();

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

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

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

Answer 1

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

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

完整的示例here。