Javascript d3：作用于类以响应事件

我正在使用d3将数据绑定到一组节点，我希望对其进行排列，以便在单击其中一个节点（或其他事件）时，所有节点都会动态更改。根据我对d3的理解，我认为它应该是这样工作的：

var nodes = svg.selectAll(".node")
    .data(someData)
    .enter()
    .append("circle") 
    .attr("r", 5)
    .attr("class", ".node")
    .style("fill", "blue")
    .on("click", function(d, i) {
        svg.selectAll(".node").style("fill", function(e, j) {
            if(someCondition(i, j))
                return "red";
            else
                return "green";
        });
    });

但当我点击时什么也没发生。即使是更简单的代码：

var nodes = svg.selectAll(".node")
    .data(someData)
    .enter()
    .append("circle") 
    .attr("r", 5)
    .attr("class", ".node")
    .style("fill", "blue")
    .on("click", function(d, i) {
        svg.selectAll(".node").style("fill", "red");
    });

---

（我希望当其中一个节点被点击时，所有节点都会变成红色）不起作用

通过调用

.attr("class", ".node")

这样做会将属性设置为

class=“.node”

，这肯定不是您想要的。此外，这将不是有效的类名。有关允许哪些字符构成类名的说明，请参见此。要选择这个类名，您必须执行一个

svg。selectAll（“…node”）

在选择器字符串中有两个点

话虽如此，更改代码以省去圆点以使其正常工作：

.attr("class", "node")

经验教训：

.attr（）

按字面意思获取属性值

应用CSS选择器时，可以在其前面加一个点来选择类名

您需要指定圆的“cx”和“cy”属性，否则将看不到任何内容

var nodes = svg.selectAll(".node")
    .data(someData)
    .enter()
    .append("circle") 
    .attr("r", 5)
    //add cx and cy here: 
    .attr("cx", function(d) {return d+10;/*just an example*/})
    .attr("cy", function(d) {return 2*d+10;/*just an example*/})
    .attr("class", "node")
    .style("fill", "blue")
    .on("click", function(d, i) {
        svg.selectAll(".node").style("fill", "red");
    });

---

抢手货此外，您还应该简单地说

this

，而不是整个svg。在您的on click.Arg中再次选择All，这非常愚蠢，但感谢您的帮助@布拉德文思：

这个
不是只指向被点击的节点吗？确实如此！我有点掩饰了你说的“全部”--哦：）这是不对的。这两个值都将默认为
0
，从而围绕原点（0,0）绘制一个圆。我自己这样做是为了使计算更容易，并在以后翻译圆。我自己编写的代码工作正常。但我甚至没有注意到它实际上是由属性“class”引起的。我应该在这里发布我的代码，而不是简单地复制你的代码。我的问题不是如何正确地显示节点，这在我的项目的其他地方都有涉及。我想为处理“点击”事件提供足够的上下文，使其有意义，而不必用不相关的细节来混淆问题。