How to select single class name from multiple using d3 js?

Question

I have to select the 1561 class name from both node.

// I tried both way

d3.selectAll(".circle")
  .select(".1561")
  .transition()
  .style("fill", "red")
  .duration(300)
  .attr('r', 30)
  .transition()
  .duration(300)
  .attr("r", function(d) {
    return hitsscale(d.value);
  });

d3.selectAll(".circle.1561")
  .transition()
  .style("fill", "red")
  .duration(300)
  .attr('r', 30)
  .transition()
  .duration(300)
  .attr("r", function(d) {
    return hitsscale(d.value);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.min.js"></script>
<g class="circle" transform="translate(1017.3805729124747,527.4013380132799)">
  <text class="labelwebmetrocomourworkinsightspovs" x="12" dy=".35em" style="opacity: 0.998138;">webmetro.com/our-work/insights/povs</text>
  <circle class="circlewebmetrocomourworkinsightspovs 1561" style="fill: rgb(255, 127, 14);" r="10.75539924707747">
    <text class="nodetextwebmetrocomourworkinsightspovs" text-anchor="middle" style="opacity: 1;">16</text>
</g>
<g class="circle" transform="translate(862.6569990598894,222.0922427070906)">
  <text class="labelwebmetrocomwhowearecareers" x="12" dy=".35em" style="opacity: 0.927648;">webmetro.com/who-we-are/careers</text>
  <circle class="circlewebmetrocomwhowearecareers 314" style="fill: rgb(255, 127, 14);" r="25.535961957598573">
    <text class="nodetextwebmetrocomwhowearecareers" text-anchor="middle" style="opacity: 1;">314</text>
</g>
<g class="circle" transform="translate(514.9645553360076,614.3173674488368)">
  <text class="labelwebmetrocomcontact" x="12" dy=".35em" style="opacity: 0.809461;">webmetro.com/contact</text>
  <circle class="circlewebmetrocomcontact 1561" style="fill: rgb(255, 127, 14);" r="10.75539924707747">
    <text class="nodetextwebmetrocomcontact" text-anchor="middle" style="opacity: 1;">16</text>
</g>

score 1 · Accepted Answer · edited May 23 '17 at 12:14

1

By selecting .circle (preceding circle with a dot) this will match all elements having class circle. However, looking at your SVG structure, you are looking for <circle> elements having class 1561. These will require the selector to be circle.1561.

d3.selectAll("circle.1561")
  .transition()
  .style("fill", "red")
  .duration(300)
  .attr('r', 30)
  .transition()
  .duration(300)
  .attr("r", function(d) {
    return hitsscale(d.value);
  });

Furthermore, you should consider renaming your class 1561, because this one is not valid as it begins with a number. See this answer for a summary of valid class names.

edited May 23 '17 at 12:14

Community

1
1

answered Oct 20 '15 at 08:12

altocumulus

21,179
13
61
84

Thanks, it working now, after renaming the class with preceding some character. – Musakkhir Sayyed Oct 20 '15 at 08:38
1

However, the invalid class name was most likely not the problem you ran into. The solution was to remove the dot preceding `circle`, because this is the element's name and not a class name as implied by the dot. – altocumulus Oct 20 '15 at 08:41
Thanks for clarifying my confusion. – Musakkhir Sayyed Oct 20 '15 at 08:43

How to select single class name from multiple using d3 js?

1 Answers1