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