根据每个点的值对颜色点进行渐变

Question

我制作了一堆点，每个点都有一个特定的值（介于0和1之间），我想根据该值为每个点上色，例如0 =灰色，1 =鲜红色，介于两者之间的是这些颜色的混合

我找到了我想要的小提琴，但是我无法找出如何在我的代码中实现它

https://codepen.io/SitePoint/pen/rLyKLG

我的代码：

 drawExpression() {
    let data : number[] = [];
    const colorMap = d3.interpolateRgb(
      d3.rgb('#6c6d6b'),
      d3.rgb('#ff0034')
    );
    var svgContainer = d3.select("body").append("svg")
      .attr("width", 1000)
      .attr("height", 1000);

    //draws dots
    for (let i = 0; i < this.cell[1].length; i++) {
      let x = this.cell[1][i].xCoordinate * 5 + 250;
      let y = this.cell[1][i].yCoordinate * 5 + 250;
      data.push(this.cell[1][i].expression);


      var circle = svgContainer.append("circle")
        .attr("cx", x)
        .attr("cy", y)
        .attr("r", 2)
        .style("fill", (d)=> {
          return colorMap(d)
        })

    }
  }