如何自定义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样式设置，但是没有成功。

- victorz

---

有没有想法可以在不定义城市名称的情况下完成这个任务？因此，第一行是红色的，第二行是蓝色的，而不管键是什么？ - DaRoGa

@DaRoGa，你可能已经想到了，但以防万一：.domain([1, 2, 3 ...])就可以解决问题。只需确保它们对应于.range([...])中的颜色即可。然后，您可以使用color(i)根据索引检索颜色。 - Greg Venech

如果您只想要颜色，甚至不需要包括域名。 - thatOneGuy

Answer 1

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

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

完整示例 在此处。

- Lars Kotthoff

---

你的例子实际上使用了v3。 - MERose

Answer 2

适用于D3 v4

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

- Amazingandyyy