here is a basic start to what you're trying to achieve. you need to start by adding a click function to your circle.

circle.on('click', function(d){
    //grabs all the circles from your array
    var allcircles = circle[0]

    //used to cycle through to see if any of them are classed with the 'selected' class'
    for (var i=0; i<allcircles.length; i++){[i]).classed('selected', false)[i]).attr('style', 'fill: rgb(0,128,0);')

    //set the circle you clicked on to have no inline style and classed to 'selected''style', '')'selected', true)

i've updated the fiddle so you can see. you can edit the css however you need. currently, it just fills the circle with a blue fill, but you can use css similar to the example you posted.


when you click the bubble, the g-selected class is added to the nodes. that changes the css that applies from

.g-node .g-democrat {
    fill: #c5d7ea;
.g-node .g-republican {
    fill: #f9caca;


.g-node.g-selected .g-democrat {
    fill: #99c0e5;
    stroke: #6081a3;
    stroke-width: 1.5px;
.g-node.g-selected .g-republican {
    fill: #fda4a7;
    stroke: #af5e61;
    stroke-width: 1.5px;

adding a class to a clicked element is pretty straightforward. the class is added using the selection.classed method.

node.classed("g-selected", function(d) { return d === topic; });

if you are looking at the source, look at the updateactivetopic function.

the code in your fiddle is quite a bit simpler than the example you linked. i would change the part where you create the circle elements so that it uses css, rather than inline style, i.e.

circle {
    fill: green;

instead of

 .style("fill", function (d, i) {
      return "green";

now, you'll add a click handler to the circles:

circle.on("click", function(d) {
        // remove selected class from all circles that have it
        circle.classed('selected', false);

        //add the selected class to the element that was clicked'selected', true)

and a style to highlight the circle when it is selected

circle.selected {
    fill: blue;
    stroke: black;
    stroke-width: 1.5px;

see the fiddle for the complete example.

More Query from same tag