javascript - d3 : acting on a class in response to an event

Question

我使用 d3 将数据绑定(bind)到一堆节点，并且我想对其进行安排，以便在单击其中一个节点(或某些其他事件)时所有节点都会动态更改。根据我对 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");
    });

(我预计当单击其中一个节点时会将所有节点变为红色)不起作用。

Answer 1

您通过调用设置圈子类名称的方式存在错误

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

这样做会将属性设置为 class=".node" 这当然不是您想要的。此外，这不是一个有效的类名。看这个answer有关允许哪些字符构成类名的说明。要选择此类名称，您必须执行svg.selectAll("..node")，选择器字符串中有两个点。

话虽如此，请更改代码以省略点以使其正常工作:

.attr("class", "node")

经验教训:

1. .attr() 按字面意思获取属性值。

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