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);
}
これは、arcData配列から適切な値を返すように機能しますが、実際には円弧を画面に描画しません。何が欠けている? DOMツリーのスクリーンショットを添付しました。円弧ノードはありますが、何も表示されません。 – mheavers
申し訳ありませんが、値を返されていないというすぐの問題がありました。 'arc'要素を作成しようとしていた部分を完全に逃しました。私は弧を作成する例を使って答えを更新しました。 – Bill
FYI:d3.svg.arc()がd3.arc()に変更されました – luQ