如何在D3折线图中自定义色阶？

Question

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

在他的示例图表中,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"]);

在这里完成示例.

Answer 2

对于D3 v4

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