2012-10-03 23 views
11

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

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

enter image description here

答えて

23

、あなたは適切なパス要素を定義する必要があります。これは私のコードです。幸いにもこれを行うには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/の作業例。

+0

これは、arcData配列から適切な値を返すように機能しますが、実際には円弧を画面に描画しません。何が欠けている? DOMツリーのスクリーンショットを添付しました。円弧ノードはありますが、何も表示されません。 – mheavers

+0

申し訳ありませんが、値を返されていないというすぐの問題がありました。 'arc'要素を作成しようとしていた部分を完全に逃しました。私は弧を作成する例を使って答えを更新しました。 – Bill

+4

FYI:d3.svg.arc()がd3.arc()に変更されました – luQ

関連する問題