How to change the size of D3 nodes onclick

You need to attach a click event handler to your circles to do this:

circle.on("click", function() {
  d3.select(this).attr("r", 12);
});

You can obviously adjust the new radius or get it from data bound to the circle.


For those who are still wondering how to make the previous node go back to its regular size once you click on a new one, here's a simple solution:

var toRemove;

.on('click', function() {
                if(toRemove){
                    d3.select(toRemove).attr("r", 6);
                }
                toRemove = this;
                d3.select(this).attr("r", 12);
            });

Simply store the previous element to the variable toRemove, and then once you click on a new circle, set the radius of the previous element back to its original size.