javascript - D3 相当于 jQuery 的子选择器？

Question

我正在寻找 jQuery 子选择器的 D3 等效项，例如:

$('rect', this).addClass('active');

我的用例是这样的:每当用户单击父 .bar 元素时，我希望 rect 元素切换 active 类。

<g class="bar">
  <rect height="18" width="300"></rect>
  <text class="label">Wholesale </text>
  <text class="value">679</text>
 </g>

目前我有这个:

bar.on('click', function(d) { 
 if (d3.select(this).classed("active")) {
  d3.select(this).classed("active", false);
 } else { 
  d3.select(this).classed("active", true);
 }
}); 

但是，这显然是将 active 类应用于 g 元素，而不是我想要的 rect 。

Answer 1

var bar = d3.select(".bar");
bar.on('click', 
       function(d) { 
           var rect = d3.select(this).select("rect");
           var hasClass = rect.classed("active");
           rect.classed("active", !hasClass); 
       }
);