11

次の例は、D3.js のドーナツ グラフを示しています。グラフに複数のリングを追加することは可能ですか?

var dataset = {
  apples: [53245, 28479, 19697, 24037, 40245],
};

var width = 460,
    height = 300,
    radius = Math.min(width, height) / 2;

var color = d3.scale.category20();

var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc()
    .innerRadius(radius - 100)
    .outerRadius(radius - 50);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.selectAll("path")
    .data(pie(dataset.apples))
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);

例: http://jsfiddle.net/gregfedorov/Qh9X5/9/

したがって、私のデータセットでは、次のようなものが必要です。

var dataset = {
  apples: [53245, 28479, 19697, 24037, 40245],
  oranges: [53245, 28479, 19697, 24037, 40245],
  lemons: [53245, 28479, 19697, 24037, 40245],
  pears: [53245, 28479, 19697, 24037, 40245],
  pineapples: [53245, 28479, 19697, 24037, 40245],
};

私が望むのは、同じ中心点の周りに合計 5 つのリングを配置することです。これは可能で、誰かに例がありますか?

4

2 に答える 2

17

はい、これは非常に簡単に行うことができます。重要なのは、ネストされたセレクションを使用することです。つまり、リストの最上位リストを渡し、各リストのコンテナ要素を作成します。次に、ネストされた選択を行い、実際の要素を描画します。この特定のケースでは、円弧が重ならないように円弧の半径も調整する必要があります。

var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
var path = gs.selectAll("path")
  .data(function(d) { return pie(d); })
.enter().append("path")
  .attr("fill", function(d, i) { return color(i); })
  .attr("d", function(d, i, j) {
    return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d);
  });

ここでjsfiddleを更新しました。

于 2013-07-06T22:48:42.723 に答える
2

投稿したフィドルを使用すると、ここにフィドルで定義された「アーク」があります。

var arc = d3.svg.arc()
    .innerRadius(radius - 100)
    .outerRadius(radius - 50);

そのアークは、ここでリング グラフを作成するために使用されるものです。

var path = svg.selectAll("path")
    .data(pie(dataset.apples))
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);

したがって、さまざまな半径を持つデータ セットごとに異なる円弧を作成しただけでは、チャートに追加のリングが表示されます。

于 2013-07-06T22:50:35.593 に答える