如何在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。

Answer 2

对于D3 v4

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