Zi 字媒體
2017-07-25T20:27:27+00:00
此篇文章瀏覽量:
358
結構部份:
有 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 + ")");
若覺得文章有幫助,請多分享,讓其他同好也能吸收網站技能知識。
Facebook
Twitter
寫了
5860316篇文章,獲得
23313次喜歡