如何从多个使用d3 js中选择单个类名？

Question

我必须从两个节点中选择类名称。

// 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>

Answer 1

通过选择.circle（以点前述circle）将匹配具有circle类的所有元素。然而，看看你的SVG结构，你正在寻找<circle>类别为1561的元素。这些将要求选择器是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); 
    }); 

此外，你应该，因为它以数字开头考虑重新命名1561类，因为这个人是不是有效。请参阅this answer以获取有效类名称的摘要。