Selecting Only One Json Object In D3

I am new to d3.js and currently working on interactive bubble chart and modifying to my need.The bubble chart I am working on is the below http://sunsp.net/demo/BubbleMenu/ Source

Solution 1:

To filter a selection to specific items, use the selection.filter(selector) method:

var desiredNames = ["Atlas", "Aglab"];
var itemsWithDesiredNames = selection.filter(function(d, i) {
    return desiredNames.includes(d.name);
});

Solution 2:

For each item, set its style visibility attribute to visible or hidden based on its name. Here is an example:

    .style("visibility", function(d) {
        return ["Atlas", "Aglab"].includes(d.name) ? "visible" : "hidden"
    })

To put it all together:

    // existing code to draw bubbles
    bubbleObj.append("circle")
        .attr("class", "topBubble")
        .attr("id", function(d,i) {return "topBubble" + i;})
        .attr("r", function(d) { return oR; })
        .attr("cx", function(d, i) {return oR*(3*(1+i)-1);})
        .attr("cy", (h+oR)/3)
        .style("fill", function(d,i) { return colVals(i); })

        // set bubble visibility based on name of data item
        .style("visibility", function(d) {
            return ["Atlas", "Aglab"].includes(d.name) ? "visible" : "hidden"
        })