d3: acting on a class in response to an event

Question

I'm binding data to a bunch of nodes using d3, and I would like to arrange it so that all of the nodes change dynamically when one of them is clicked on (or some other event). Based on my understanding of d3, I think it should work like this:

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";
        });
    });

But nothing happens when I click. Even the simpler code:

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");
    });

(which I expect would turn all of the nodes red when one of them is clicked on) does not work.

score 3 · Accepted Answer · edited May 23 '17 at 12:29

3

There is an error in the way you are setting the class names for your circles by calling

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

Doing it this way would set the attribute to class=".node" which is certainly not what you want. Moreover, this would not be a valid class name. See this answer for an explanation of what characters are allowed to form a class name. To select this class name you would have to do a svg.selectAll("..node") having two dots in your selector string.

Having said that, change you code to leave out the dot to make it work:

.attr("class", "node")

Lessons learned:

.attr() takes the attribute's value literally.
When applying a CSS selector, you prefix it with a dot to select a class name.

edited May 23 '17 at 12:29

Community

1
1

answered Oct 29 '15 at 16:27

altocumulus

21,179
13
61
84

Good catch. Further you should also simply say `this` instead of the whole svg.selectAll again within your on click. – Brad Evans Oct 29 '15 at 16:31
Arg, that was pretty silly, but thanks for the catch. @BradEvans: wouldn't `this` point only to the node which was clicked? – Paul Siegel Oct 29 '15 at 16:35
Indeed it would! I kind of glossed over the fact that you said "all" -- oops :) – Brad Evans Oct 29 '15 at 16:37

derek · Answer 2 · 2015-11-10T05:29:46.033

-1

You need specify the "cx" and "cy" properties of a circle, otherwise you wont see anything.

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");
    });

edited Nov 10 '15 at 05:29

answered Oct 29 '15 at 16:53

derek

9,358
11
53
94

That's not correct. Both values will default to `0`, thus drawing a circle around the origin (0,0). I've done this myself to make calculations more easy and translate the circle later on. – altocumulus Oct 29 '15 at 17:35
I wrote my own code that work correctly. But I did not even notice it is actually caused by attribute "class". I should have post my code here instead simply copy your code. – derek Oct 29 '15 at 18:01
My question was not about how to properly display the nodes in the first place - that is dealt with elsewhere in my project anyway. I wanted to provide enough context for handling a "click" event to make sense without cluttering the question with irrelevant details. – Paul Siegel Oct 29 '15 at 18:01

d3: acting on a class in response to an event

2 Answers2