在 d3 中选择和更改圆圈颜色的更清洁和更好的方法

Question

在玩了很多之后，我设法让下面的函数一次改变了我所有 7 个圆圈的颜色。有一个可变颜色，它是一个颜色字符串数组。

这是我的功能：

function colorSquares(){
    for(let i = 0; i<7 ; i++){
        let id = '#s' + i ;
        d3.select(id).attr('fill',colors[i]);
     }
}

我不禁想到有一种更简单的方法可以做到这一点！我创建了这样的 7 个圆圈：

for(let i = 0 ; i< 7; i++){
    const circle = d3.select('.canvas')
        .append('circle')
            .attr('cx', 70 + i* 50)
            .attr('cy', 100)
            .attr('r', 20)
            .attr('stroke' ,'grey')
            .attr('stroke-width', 5)
            .attr('id' , 'c'+i );

}

如您所见，我手动创建了一个字符串，并使用 .attr 将其添加到每个圆圈中，然后用字符串乱七八糟地调用这个圆圈。有没有人有更清洁和更好的方法来做到这一点，有效地我正在寻找更好的方法来创建然后选择圆圈，这样我就不必将字符串作为 ID 搞砸

Answer 1

试试

d3.select('.canvas')
  .selectAll('circle')
  .attr('fill', (d, i) => colors[i]);