d3

SVG基本図形

29 May 2014

<svg width="50" height="50">
  <circle cx="25" cy="25" r="25" fill="lime" />
</svg>
//svg コンテナを作る
var svg01 = d3.select("#ins01").append("svg")
                               .attr("width", 50)
                               .attr("height", 50);
// 円を描く
var circle = svg01.append("circle")
                  .attr("cx", 25)
                  .attr("cy", 25)
                  .attr("r", 25)
                  .style("fill", "lime");

円を描くには2つのプロセスが有ります

  1. svgコンテナを作る
  2. 円を描く

長方形

<svg width="100" height="100">
  <rect x="0" y="0" width="50" height="100" fill="green" />
</svg>
//SVG コンテナを作る
var svg02 = d3.select("#ins02").append("svg")
                                    .attr("width", 100)
                                    .attr("height", 100);

// 長方形を描く
var rectangle = svg02.append("rect")
                            .attr("x", 10)
                            .attr("y", 10)
                            .attr("width", 50)
                            .attr("height", 100)
                            .style("fill","green");

楕円形

<svg width="100" height="100">
  <ellipse cx="50" cy="50" rx="40" ry="20" fill="red" />
</svg>
//SVG コンテナを作る 
var svg03 = d3.select("#ins03").append("svg")
                               .attr("width", 100)
                               .attr("height", 100);

//楕円形を描く
var ellipse = svg03.append("ellipse")
                   .attr("cx", 50)
                   .attr("cy", 50)
                   .attr("rx", 40)
                   .attr("ry", 20)
                   .style("fill","red");

直線

<svg width="100" height="100">
  <line x1="5" y1="5" x2="90" y2="80" stroke="gold" stroke-width="5" />
</svg>
var svg04 = d3.select("#ins04").append("svg")
                               .attr("width", 100)
                               .attr("height", 100);

var line = svg04.append("line")
                .attr("x1", 5)
                .attr("y1", 5)
                .attr("x2", 90)
                .attr("y2", 80)
                .attr("stroke","gold")
                .attr("stroke-width","5");

lineは、幾何学的には1次元で、中身がありません。 したがって、line要素は fillできません。

そこで

を与えます。

ポリライン

<svg width="50" height="50">
  <polyline fill="none" stroke="white" stroke-width="2" 
               points="05,30
                       15,30 
                       15,20
                       25,20
                       25,10
                       35,10" />
</svg>

ポリゴン

<svg width="50" height="50">
  <polygon fill="yellow" stroke="gray" stroke-width="2" 
                points="05,30
                        15,10 
                        25,30" />
</svg>

ポリライン と ポリゴン を描くのに

d3.js では、 d3.svg.line() を使うのが便利です

そのためには __SVG Paths__ を勉強する必要があります