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