Question

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

// 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>的{{1}}元素。这些将要求选择器为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); });，因为这个课程无效，因为它以数字开头。有关有效类名的摘要，请参阅this answer。

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

1 个答案: