javascript - D3：如何在两种颜色之间进行插值？

Question

我想创建一个颜色变量，根据它们的值给我的散点图点颜色。试图使其范围从 0（红色）到 1（绿色）并在两者之间线性缩放。

我尝试了这个线程中的建议，但没有奏效。我也尝试了这里的建议。

试试 1

var color = d3.scaleLinear()
  .domain(0, .5, 1)
  .range(["red","white","green"]);

  console.log(color(+0))
  console.log(color(+.5))
  console.log(color(+1))

输出

rgb(255, 0, 0)
rgb(255, 0, 0)
rgb(255, 0, 0)

试试 2

  var color = d3.scaleLinear()
    .domain(0, 1)
    .range(["red","green"]);

  console.log(color(+0))
  console.log(color(+.5))
  console.log(color(+1))

输出

rgb(0, 0, 0)
rgb(0, 0, 0)
rgb(0, 0, 0)

尝试 3

  var color = d3.scaleLinear()
    .domain(0, 1)
    .range(["#ff0000","#00ff00"]);

  console.log(color(+0))
  console.log(color(+.5))
  console.log(color(+1))

输出

rgb(0, 0, 0)
rgb(0, 0, 0)
rgb(0, 0, 0)

我想要的输出是

rgb(255, 0, 0)
rgb(128, 128,0)
rgb(0, 255, 0)

标签： javascriptd3.js