d3

textPath

30 Mar 2015

textPath

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");