在D3中更改子类的属性

Question

我想更改下图中所见的子类的属性。

如何在两种不同的场景中选择该特定对象？

1）创建主类时：

slider = svg.append("g")
        .attr("class", "slider")
        .attr("transform", "translate(" + slider_translate_width + "," + 0 + ")")
        .attr("cursor", "default")
        .call(brush);

2）使用svg.selectall("...")

时

Answer 1

在第一种情况下，变量slider是<g class="slider">元素，如屏幕截图所示。只需通过调用

选择rect元素即可

var rect = slider.select('rect');
rect.attr('width', ...);

/* Or, chaining */
slider.select('rect').attr('width', ...);

您还可以使用CSS选择器和select或selectAll选择元素：

d3.selectAll('.slider > rect').attr('width', ...);

通常，第二种方法是较慢，因为您遍历整个DOM而不是第一种方法，在那里您只遍历<g class="slider">的兄弟。