在 D3 中更改子类的属性

Question

我想更改下图中子class的属性。

如何 select 在两种不同的场景中使用特定对象？

1) 创建主class时：

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"> 元素。通过调用

简单地 select rect 元素

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

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

您还可以 select 使用 CSS select 或 select 或 selectAll:

的元素

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

一般来说，第二种方法较慢因为你要遍历整个 DOM 而不是第一种方法，你只遍历的兄弟姐妹<g class="slider">.

在 D3 中更改子类的属性

Changing attribute of subclass in D3

svg

d3.js