d3

SVGの基本

30 May 2014

SVG要素をwebページに追加する

d3.select("#ins01").append("svg")
                   .attr("width", 50)
                   .attr("height", 50)
                   .append("circle")
                   .attr("cx", 25)
                   .attr("cy", 25)
                   .attr("r", 25)
                   .style("fill", "lime");

まずは実行してみます

Style Operator

.style("fill","lime")

styleオペレータは、選択されている要素にCSSのスタイルを適用します。

Selections as JavaScript Variables

// 挿入先を選択
var insSelection = d3.select("#ins02");
// 挿入先にsvg要素を追加し、そのsvg要素を選択
var svgSelection = insSelection.append("svg")
      .attr("width", 50)
      .attr("height", 50);
// svg要素に円を追加 
var circleSelection = svgSelection.append("circle")
      .attr("cx", 25)
      .attr("cy", 25)
      .attr("r", 25)
      .style("fill", "lime");

D3.jsが返してくるセレクションを、JavaScript変数に割り当てることができます。

SVG Circle要素

SVG Circle要素は、基本のSVG形要素です。 基本の形要素は、SVGですでに定義されている標準の形です。

注 pathを使って計算で再作成することもできます。

データに基づいたSVG要素をウェッブページに追加

// SVG円へ変換するためにバインドしたデータを使う
var circleRadii = [{"r":40,"color":"white"},
                   {"r":20,"color":"gold"},
                   {"r":10,"color":"orange"},
                   {"r":50,"color":"green"}
                  ];

var svgContainer = d3.select("#ins03").append("svg")
                                    .attr("width", 400)
                                    .attr("height", 200);

var circles = svgContainer.selectAll("circle")
                          .data(circleRadii)
                          .enter()
                          .append("circle");

var circleAttributes = circles
                       .attr("cx", function(d,i){ return i*80+50; }})
                       .attr("cy", 50)
                       .attr("r", function (d) { return d.r; })
                       .style("fill", function (d) { return d.color; });

 .attr("cx", function(d,i){ return i*80+50; }}) // 関数で値を指定 
   //function(d,i)  d:バインドしたデータ i:バインドしたデータの指標
 .attr("cy", 50) // 直接値を指定
 .attr("r", function (d) { return d.r; }) // d.r バインドしたデータの要素rの値
 .style("fill", function (d) { return d.color; }); // d.color バインドしたデータの要素colorの値