更改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">元件。通過簡單地調用

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

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

您也可以使用CSS選擇器選擇元素和select或selectAll選擇rect元素：

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

一般來說，第二種方法是慢因爲你遍歷整個DOM，而不是第一種方法，其中只遍歷<g class="slider">的同胞。