D3相当于jQuery的子选择器？

Question

我正在寻找与jQuery的子选择器相当的D3，例如：

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

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

<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); 
       }
);