D3.jsで1:1で円グラフを書きその中でさらに割合で分割したいです。
<!DOCTYPE html> <meta charset="utf-8"> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script> var width = 960, height = 700; var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(300,300)"); var data = [20,50,60,30]; var r = 300; var color = d3.scale.ordinal() .range(["red","orange","green","blue"]); //startAngleとendAngleは設定しない。 var arc = d3.svg.arc().outerRadius(r); // pieはデータを取って、data / value / startAngle / endAngle のオブジェクトを作る。 // スタートとエンドが被らないように、さらに全体が360になるようにマッピングしてくれる。 var pie = d3.layout.pie(); svg.selectAll("path").data(pie(data)).enter() // pie(data)で変換している。 .append("path") .attr("d", function(c){ return arc(c);}) // arcはstartAngleとendAngleのオブジェクトがあれば自動で取る。 .attr("fill",function(d) { return color(d.data); }); </script> </body> </html>
とコードを書くと
というアウトプットになりました。
目標は
というアウトプットにすることです。
1:1で円グラフを書きその中で、さらにその分割した中で2つに分割したいです。
どう直せば良いのでしょうか?
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。