d3

SVG Arc

31 May 2014

円弧を描きます

開始位置
終了位置
 // arc generator   
 var arc = d3.svg.arc()
      .innerRadius(function(d){return d.innerRadius})
      .outerRadius(function(d) {return d.outerRadius})
      .startAngle(function(d){return d.startPos * (pi/180);}) //変換 from degs to radians
      .endAngle(function(d) { return d.endPos * (pi/180);});                               
 
 // arc generator を使ってsvg path を描く
 svg01.selectAll("path")
    .data(arcs)
    .enter()
    .append("path")
    .attr("d", arc)
    .attr("transform", "translate(250,250)")
    .attr("stroke","lime")
    .attr("stroke-width", 3)
    .attr("fill",function(d,i){return color(i);});

円弧を描画するのに必要な属性は