为什么不选择和更改 D3 中的属性？

Question

我有一个名为 data 的简单数据对象，其中包含一些我希望用于我的圆圈的半径、坐标和颜色。但是我现在想让它们全部变成橙色，但最后一行代码似乎没有运行？

const myCircles = svg.selectAll()
.data(data);

myCircles.enter().append('circle')
    .attr('cx' , (d) => d.x)
    .attr('cy' , (d) => d.y)
    .attr('r' , (d) => d.radius )
    .attr('fill' , (d) => d.color )

myCircles.attr('fill' , 'orange');

我尝试过的其他方法无效

我试过了

d3.selectAll(myCircles).attr('fill' , 'orange');

我试过了

svg.selectAll(myCircles).attr('fill' , 'orange');

但两次都收到错误：d3.v7.min.js:2 Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Element': '[object Object]' is not a valid selector.

什么有效，但我不想要它

d3.selectAll('circle').attr('fill' , 'orange')

因为我想通过变量 myCircles 选择圆圈，而不是使用 d3 标签“circle”，因为我打算稍后制作更多圆圈。

Answer 1

myCircles 变量为空，因为它只是更新选择，而不是附加圆圈的输入选择。如果您需要一个变量来保存附加的圆圈，您可以将输入选择分配给它：

const myCircles = svg.selectAll()
.data(data);

const myOrangeCircles = myCircles.enter().append('circle')
    .attr('cx' , (d) => d.x)
    .attr('cy' , (d) => d.y)
    .attr('r' , (d) => d.radius )
    .attr('fill' , (d) => d.color )

myOrangeCircles.attr('fill' , 'orange');

我推荐的一个很好的资源是官方General Update Pattern Tutorial

---

补充：

除了变量之外，您还可以使用类来区分对象。例如，如果您将圈子附加到一个类中，您可以稍后使用selectAll 来仅检索与该类匹配的圈子：

myCircles.enter().append('circle')
    .attr('cx' , (d) => d.x)
    .attr('cy' , (d) => d.y)
    .attr('r' , (d) => d.radius )
    .attr('fill' , (d) => d.color )
    .classed('myOrangeCircle', true)

svg.selectAll('circle.myOrangeCircle').attr('fill' , 'orange');