[Solved]-Bubble highlight feature in d3js bubble chart-d3.js

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++){
        d3.select(allcircles[i]).classed('selected', false)
        d3.select(allcircles[i]).attr('style', 'fill: rgb(0,128,0);')
    }

    //set the circle you clicked on to have no inline style and classed to 'selected'
    d3.select(this).attr('style', '')
    d3.select(this).classed('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;
}

to

.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
        d3.select(this).classed('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.