15

キャンバス データの視覚化を作成するために、javascript ライブラリ d3.js ( http://d3js.org/ ) を使用しています。円弧を作成しようとしていますが、配列からデータ パラメータを受け入れません。私が間違っていることを誰かが知っていますか？これは私のコードです：

var chartConfig = { "canvasSize" : 800 }

var radius = chartConfig.canvasSize / 2;
var pi = Math.PI;

var vis = d3.select("#chart").append("svg")
    .attr("width", radius * 2)
    .attr("height", radius * 2)
    .append("g")
    .attr("transform", "translate(" + radius + "," + radius + ")");

var arcData = [
  {aS: 0, aE: 45,rI:radius/2,rO:radius}
];
var arc = vis.selectAll("arc").data(arcData).enter().append("arc");
arc.attr("innerRadius", function(d){d.rI}).attr("outerRadius",function(d){d.rO}).attr("class","arc");

function degToRad(degrees){
  return degrees * (pi/180);
}

ここに画像の説明を入力

4

1 に答える 1

33

SVG には要素がありませんarc。適切なパス要素を定義する必要があります。幸いなことに、d3これを行うためのヘルパー関数があります。

var arc = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(70)
    .startAngle(45 * (Math.PI/180)) //converting from degs to radians
    .endAngle(3) //just radians

vis.append("path")
    .attr("d", arc)
    .attr("transform", "translate(200,200)")

http://jsfiddle.net/g0r9n090/の作業例;

于 2012-10-03T22:54:33.060 に答える