在d3中选择和改变圆圈颜色的更干净和更好的方式

Question

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

下面是我的函数:

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

Try

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