[D3] SVG Group Element

結構部份：

有 2 個理由需要使用 group element：

• Grouping
• Transformation

Group Element 裡面也可以有 Group Element：

範例1：

SVG Group Element Transformation

範例1：(向右移動 20units)

範例2：

Grouping SVG Elements with D3

var svgSelection = d3.select("body").append("svg").attr("width", "200").attr("height", "200");

var groupSelection = svgSelection.append("g");
groupSelection.append("circle").attr("cx", 20).attr("cy", 20).attr("r", 20);
groupSelection.append("circle").attr("cx", 70).attr("cy", 70).attr("r", 20);

svgSelection.append("rect").attr("x", 110).attr("y", 110).attr("height", 30).attr("width", 30);
svgSelection.append("rect").attr("x", 160).attr("y", 160).attr("height", 30).attr("width", 30);

groupSelection.attr("fill", "purple");

D3 and SVG Group Element Transform

groupSelection.attr("transform", "translate(10, 20)");

// 動態
.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");