d3

テキスト要素

24 May 2014

テキスト要素は、SVG コンテナにテキストを描画します。

var width = 400, height = 250;
var radius = 10;
var c10 = d3.scale.category10();

//Create the SVG Viewport
var svg01 = d3.select("#ins01").append("svg")
                               .attr("width", width)
                               .attr("height", height)
                               .attr("background","#333");

var data = [
  {"x":200,"y":50,"anchor":"start"},
  {"x":200,"y":100,"anchor":"middle"},
  {"x":200,"y":150,"anchor":"end"},
  {"x":200,"y":200,"anchor":"none"}
];

// 円を描画
svg01.selectAll("circle")
      .data(data)
   .enter()
      .append("circle")
      .attr("cx", function(d){ return d.x; })
      .attr("cy", function(d){ return d.y; })
      .attr("r", radius)
      .attr("stroke","white")
      .attr("stroke-width", 2)
      .style("fill", function(d,i){ return c10(i)});  

// テキストを描画
svg01.selectAll("text")
   .data(data)
   .enter()
   .append("text")
   .attr("x", function(d) { return d.x;} ) // x座標の位置
   .attr("y", function(d) { return d.y - 10;}) // y座標の位置
   .attr("text-anchor", function(d){ return d.anchor}) // x,y座標に対してアンカー指定 
   .text(function(d) {return "text-anchor: " + d.anchor;})  // 文字列の設定
   .attr("font-family", "sans-serif") // font属性
   .attr("font-size", "20px") // fontサイズ
   .style("fill","#fff");