D3.js 如何自定义D3折线图中的颜色比例？

如何更改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样式，但没有成功。

您只缺少

.range（）

中值周围的方括号，它将数组作为参数。所以代码应该是

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

完整示例。

适用于D3 v4

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

---

你知道如何做到这一点而不必定义城市名称吗。所以第一行是红色的，第二行是蓝色的等等，不管键是什么？@DaRoGa，你可能已经猜到了，但以防万一：

。域（[1，2，3…]）

就可以了。只需确保它们与

范围（[…]）

中的颜色相对应即可。然后你可以使用

color（i）

根据索引检索你的颜色。如果你只想得到你的示例实际使用的v3的颜色，你甚至不需要包含域。