如何自定义 D3 折线图中的色标？答案

【问题标题】：How to customize the color scale in a D3 line chart?如何自定义 D3 折线图中的色标？
【发布时间】：2014-02-08 02:09:26
【问题描述】：

如何更改 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 样式，但这不起作用。

【问题讨论】：

任何想法如何做到这一点，而不必定义城市名称。所以第一行是红色的，第二行是蓝色的等等，不管键是什么？
@DaRoGa，您可能已经想通了，但以防万一：.domain([1, 2, 3 ...]) 可以解决问题。只需确保它们与您的.range([...]) 中的颜色相对应。然后您可以使用color(i) 根据索引检索您的颜色。
如果你只想要颜色，你甚至不需要包含域

【解决方案1】：

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

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

完整示例here。

【讨论】：

【解决方案2】：

适用于 D3 v4

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

【讨论】：