d3

SVG Group要素

26 May 2014

SVGグループ要素は、

<g>
  <g>
    <g>
      .....
    </g>
  </g>
</g>

SVGグループ要素に適用した変形は、その中に含まれる子要素すべてに適用されます。

SVGグループ要素の2つの主要な使い方

  1. グルーピング
  2. 変形

SVG 要素をグループ化

var circleData = [
   { "cx": 20, "cy": 20, "radius": 20, "color" : "lime" }, 
   { "cx": 70, "cy": 70, "radius": 20, "color" : "gold" }];
 
 
 var rectangleData = [
   { "rx": 110, "ry": 110, "height": 30, "width": 30, "color" : "aqua" },
   { "rx": 160, "ry": 160, "height": 30, "width": 30, "color" : "red" }];
 
var svgContainer = d3.select("#ins01").append("svg")
                                      .attr("width",200)
                                      .attr("height",200);

//We add the SVG Group Element Transform Here
var circleGroup = svgContainer.append("g")
                               .attr("transform", "translate(80,0)");

//Circles added to the circleGroup
var circles = circleGroup.selectAll("circle")
                          .data(circleData)
                          .enter()
                          .append("circle");

var circleAttributes = circles
                       .attr("cx", function (d) { return d.cx; })
                       .attr("cy", function (d) { return d.cy; })
                       .attr("r", function (d) { return d.radius; })
                       .style("fill", function (d) { return d.color; });

//Rectangles added to the svgContainer
var rectangles = svgContainer.selectAll("rect")
                             .data(rectangleData)
                             .enter()
                             .append("rect");

var rectangleAttributes = rectangles
                          .attr("x", function (d) { return d.rx; })
                          .attr("y", function (d) { return d.ry; })
                          .attr("height", function (d) { return d.height; })
                          .attr("width", function (d) { return d.width; })
                          .style("fill", function(d) { return d.color; });