D3：如何在两种颜色之间插值？

Question

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

我在此thread中尝试了该建议，但是没有用。我也尝试过建议here。

尝试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)