d3.js advent calendar 11日目

d3 javascript adventcalendar

d3 advent calendar 11日目
d3.svg API (1/2)

基本的な使い方

そもそもsvgはいくつかの表現要素を定義しています

  • rect: 矩形: x, y, width, height[, rx, ry]
  • circle: 円: cx, cy, r
  • ellipse: 楕円: cx, cy, rx, ry
  • line: 線分: x1, y1, x2, y2
  • polyline:
  • polygon
  • text: テキスト: x, y, dx, dy, text-anchor
  • path

d3では、これらをSelector APIの1つ.append()で追加し、.attr()で種々の属性値を指定することで表現する事が可能です。

基本的な図の描き方

10日目にして要約svgの絵が出てきます :)

 
//svg要素を追加します
var svg = d3.select('#svg-sample-11').append('svg').attr('width', 200).attr('height', 100);
var color = d3.scale.category20();
var x = d3.scale.linear().domain([0, 10]).range([0, 150]);
// これから作成する要素を定義します
svg.selectAll('rect')
 .data(d3.range(1, 10)).enter()
 .append('rect')
 .attr('width', 10)
 .attr('height', function(d){ return d * 8;})
 .attr('x', function(d){ return x(d);})
 .attr('y', function(d){ return 100 - d * 8})
 .attr('fill', function(d){ return color(d);})

d3が提供するPath生成 API

前項に挙げた要素をそのまま使ってもいいのですが、d3で面白い/便利なのはpathを使った時です。
d3では、いくつかのpath生成 APIが容易してあり、これを利用することで容易にpathの軌跡を作成することができます

定義されているAPI

d3が提供するPath生成 APIの使い方

基本的には.append('path')でsvgにpath要素を追加し、それに対してdという属性値にpathの軌跡をセットすることになります。この際、.attr()に渡されるデータを利用して、データごとに表現を変更することがd3の醍醐味です。

d3.svg APIの基本的な使い方(line, area)

 
var x = d3.scale.linear().domain([0, 10]).range([0, 150]),
 y = d3.scale.linear().domain([0, 10]).range([100, 0]);
var line = d3.svg.line().x(function(d){ return x(d.x)}).y(function(d){ return y(d.y)});
d3.select('#svg-api-11').append('svg').attr('width', 150).attr('height', 100)
 .datum(d3.range(0, 10).map(function(d){ return {x: d, y: 0|Math.random() * 10}}))
 .append('path')
 .attr('d', line) // ← ｺｺ！！
 // .attr('d', function(d){ return line(d); }) // これでもいい
 .attr('stroke', 'blue')
 .attr('fill', 'none');

d3.svgの使い方の説明

  1. x, yのscaleを作成: HTMLと同じでy座標は上から下に数値が大きくなるのでscaleで逆にセット
  2. lineオブジェクトを作成
  3. lineのx,y 座標を定義
  4. svg要素を作成・追加
  5. .datumオブジェクトで扱うデータの塊をセット(移行selecor API利用時に値に関数を渡すと引数にデータを利用できる
  6. path要素を追加
  7. "d"という属性にlineオブジェクトを渡す

実例: d3.svg.symbol

 
var color = d3.scale.category20(); var svg = d3.select('#symbol-test-11') .append('svg').attr('width', 150).attr('height', 150) .selectAll('path').data(d3.range(0, 9)).enter() .append('path') .attr('transform', function(d){ return 'translate('+(0|Math.random() * 150)+', '+(0|Math.random() * 150)+')'}) .attr('d', d3.svg.symbol().type('circle').size(function(d){ return 50 + 0|Math.random() * 150}))
 .attr('stroke', function(d){ return color(d);}).attr('fill', 'none');