2

私は、非常に大きなデータ セットを操作し、非常に大きな円グラフの配列を作成しようとしている D3 に比較的慣れていません。ただし、各円グラフの一番上にタイトルを配置する方法がわかりません。

私が使用しているデータは現在、このようなcsv形式であり、果物は円グラフに必要なラベルになります

[apple,90,36,2]
[pear,36,36,3]
[grape,19,13,0]

以下に含まれるコードで機能するデータを以下に貼り付けました。また、最終的には、データをズームインして、次のようなズームアウト機能から見ることができるようにしたいと考えています:

http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html

ここに画像の説明を入力

誰かがこれを効果的に伝えるためのアイデアを持っているなら、それは大歓迎です.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Multiple Pie Charts</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.4.5"></script>
    <style type="text/css">


body {
  text-align: center;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">
var data = [
[90,36,2],
[36,36,3],
[19,13,0],
]
var m = 10,
    r = 100,
    z = d3.scale.category20c();
var svg = d3.select("body").selectAll("svg")
    .data(data)
  .enter().append("svg:svg")
    .attr("width", (r + m) * 2)
    .attr("height", (r + m) * 2)
  .append("svg:g")
    .attr("transform", "translate(" + (r + m) + "," + (r + m) + ")");
svg.selectAll("path")
    .data(d3.layout.pie())
  .enter().append("svg:path")
    .attr("d", d3.svg.arc()
    .innerRadius(r / 2)
    .outerRadius(r))
    .style("fill", function(d, i) { return z(i); });

    </script>
  </body>
</html>
4

2 に答える 2