CODEWITHSUNDEEP
javascriptd3.js
zuro
zuro

Reputation: 71

d3js select circle with specific text label

I would like to select all circles with specific text label and add them new style: .style("fill", "red") and onclick method: .on("click", function(d) { zoom(d); }); How to do that?

Here is code to generate circles and labels:

var circle = svg.selectAll("circle")
              .data(nodes)
              .enter().append("circle")
              .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
              .style("fill", function(d) { return d.children ? color(d.depth) : null; })
              .on("click", function(d) { if (focus !== d && d.name.charAt(0) != 'z') zoom(d), d3.event.stopPropagation(); else if( d.name.charAt(0) === 'z' ) selectSound(d); });  


          var text = svg.selectAll("text")
              .data(nodes)
              .enter().append("text")
              .attr("class", "label")
              .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
              .style("display", function(d) { return d.parent === root ? null : "none"; })
              .text(function(d) { return d.name });

Upvotes: 0

Views: 1216

Answers (1)

meetamit
meetamit

Reputation: 25157

After you create the circles and texts (by running the code you included above):

circle
  .filter(function(d) {
    return d.name == "the-name-of-the-circles-you-want-to-affect";
  })
  .style("fill", "red")
  .on("click", function(d) { zoom(d); });

That's how you can get at a subset of the circles selection.

However, keep in mind that setting the new 'click' handler on the filtered nodes will override the original click event handler that you initially set on those circles. Maybe that's not a problem; depends on what all is going on in your app etc.

Upvotes: 1

Related Questions