d3.js - 如何自定义 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 .