1

こんにちは、コックスコム チャートを複数描画しようとしています。このコードは、そのようなチャートを 1 つ描画します。jsfiddle の例

私が遭遇した問題: そのようなグラフを複数描画できるようにデータを並べ替えるにはどうすればよいですか?

//data
var data = [
    {"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}
];

//container
var svg = d3.select("body")
.append("svg:svg")
.attr("width", 1000)
.attr("height", 1000);

var pi = Math.PI;

var arc = d3.svg.arc()
        .innerRadius(0)
        .outerRadius(function(d,i) {return (0 + d.value); })
        .startAngle(function(d,i) { return ((d.time - 1) * 60 * pi / 180); })
        .endAngle(function(d) { return (d.time * 60 * pi / 180 ); });

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

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

おそらく、次の方法でデータを注文できると思いました。

var data2 = [
{label: "Rose.chart1", value: [150,65,50,75,150,65]}
{label: "Rose.chart2", value: [130,50,30,10,50,70]}
]

しかし、それは私が以下を書き直さなければならないことを意味します：

1.) アーク変数の定義

var arc = d3.svg.arc()
        .innerRadius(0)
        .outerRadius(function(d,i) {return (0 + d.value); })
        .startAngle(function(d,i) { return ((d.time - 1) * 60 * pi / 180); })
        .endAngle(function(d) { return (d.time * 60 * pi / 180 ); });

2.) データをセレクションにバインドする

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

おそらくデータ オブジェクト (data2) を入力する必要があると思いますが、値要素についても同様です。私の説明を許してください。

function(d.value) {???}
4

1 に答える 1

4

まず、配列の配列としてデータを入れ子にします。したがって、次のようになります。

//data
var data = [
  [
    {"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": "January", "value": 123, "time": 1},
    {"label": "February", "value": 62345, "time": 2},
    {"label": "March", "value": 5340, "time": 3},
    {"label": "April", "value": 72315, "time": 4},
    {"label": "May", "value": 11350, "time": 5},
    {"label": "June", "value": 6135, "time": 6}
  ],
];

次に、データにバインドされた親コンテナーにグラフを入れ子にします。

svg.selectAll(".charts")
  .data(data)
    .enter()
      .append("g")
      // Translate each chart based on 'i'
      .attr("transform", function(d, i) { return "translate(" + ((i+1) * 450) + ", 300)");
      .each(function(chartData, i) {
         var chartContainer = d3.select(this);// Selects the containing 'g'
         // The rest is what you already wrote
         chartContainer.selectAll("path")
            .data(data)
            .enter()
            .append("path")
            .attr("d", arc)
            .attr("class", "arc");
      });
于 2013-02-20T05:56:53.973 に答える