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

  • Z时代
  • 2024-01-10
  • 分类：问答

我必须从两个节点中选择类名称。如何从多个使用d3 js中选择单个类名？

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

回答：

通过选择.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以获取有效类名称的摘要。

以上是 如何从多个使用d3 js中选择单个类名？ 的全部内容， 来源链接： utcz.com/qa/260342.html

回到顶部