textPathで曲線に沿って文字列を表示する
// svg container
var svg01 = d3.select("#svg01")
.append("svg")
.attr("height",500)
.attr("width",500)
.style("background","#333");
// scale definition
var xScale01 = d3.scale.linear()
.domain([0,6])
.range([50,450]);
var yScale01 = d3.scale.linear()
.domain([1.2,-1.2])
.range([50,450]);
/* Path */
var pathData01 = [];
function func01(i){
return Math.sin(i)
}
for (var i=0;i<=6;i=i+0.1){
pathData01.push(new Point(i,func01(i)));
}
pathAttrs01 = {"stroke":"lime","strokeWidth":3,"_id":"myText"};
var defs = svg01.append("defs");
drawPath(defs,pathData01,pathAttrs01,xScale01,yScale01);
var textG = svg01.append("g")
.attr("id", "text")
.style("fill", "navy");
textG.append("text")
.style("font-size", "22px")
.attr("stroke","gold")
.append("textPath")
.attr("xlink:href", "#myText")
.text(" pathで与えた曲線に沿って文字を出力しています。(D3) koyamatch.com");
textG.append("use")
.attr("xlink:href", "#myText");