5

私は強力な JS ユーザーではありませんが、次のような「ナイチンゲール チャート」を作成したいと考えています: http://windhistory.com/station.html?KHKA 私はそのコードを持っています:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="d3.v2.js"></script>
    <style type="text/css">
        .arc{
            fill: pink;
            stroke: red;
        }
    </style>
  </head>
  <body>
    <div id="chart" class="chart"></div>
    <div id="table"></div>
    <script type="text/javascript">
      var svg = d3.select("#chart").append("svg").attr("width", 900).attr("height", 600);
      var pi = Math.PI;

      d3.json(
          'data.json',
          function(data){
            var arc = d3.svg.arc()
                .innerRadius(50)
                .outerRadius(function(d) { 
                    return (50 + d.value); 
                })
                .startAngle(function(d) { return ((d.time - 1) * 30 * pi / 180); })
                .endAngle(function(d) { return (d.time * 30 * pi / 180 ); });

            var chartContainer = svg.append("g")
                .attr('class', 'some_class')
                .attr("transform", "translate(450, 300)");

            chartContainer.append("path")
                .data(data)
                .attr("d", arc)
                .attr("class", "arc");
          }
      );
    </script>
  </body>
</html>

jsfinddle について: http://jsfiddle.net/lmasikl/gZ62Z/

私のjson：

[
    {"label": "January", "value": 150, "time": 1},
    {"label": "February", "value": 65, "time": 2},
    {"label": "March", "value": 50, "time": 3},
    {"label": "April", "value": 75, "time": 4},
    {"label": "May", "value": 150, "time": 5},
    {"label": "June", "value": 65, "time": 6},
    {"label": "July", "value": 50, "time": 7},
    {"label": "August", "value": 75, "time": 8},
    {"label": "September", "value": 65, "time": 9},
    {"label": "October", "value": 50, "time": 10},
    {"label": "November", "value": 75, "time": 11},
    {"label": "December", "value": 150, "time": 12}
]

しかし、私のスクリプトは 1 つの円弧しか描画しません。誰でもこの問題を解決するのを助けることができますか?

4

1 に答える 1

7

結合について考えるを読みたいと思うかもしれません。データ駆動型要素を追加するための D3 パターンは、 で選択を作成しselectAll、次に でデータを設定し、data次に要素を選択に追加すること.enter()です。そう

chartContainer.append("path")
    .data(data)
    .attr("d", arc)
    .attr("class", "arc");

する必要があります

chartContainer.selectAll("path")
    .data(data)
  .enter().append("path")
    .attr("d", arc)
    .attr("class", "arc");

更新されたフィドルを参照してください: http://jsfiddle.net/gZ62Z/1/

于 2012-11-27T17:29:45.830 に答える