2

例をできるだけ単純化しました。私はdata.csvファイルを持っていて、以下のように要素を作成したい(結果)。エレガントな方法はありますか？ありがとうございました。

データ (data.csv):

id, name, value
1, fruits, apple
2, fruits, pear
3, fruits, strawberry
4, vegetables, carrot
5, vegetables, celery
...

結果：



    <g class="groups" id="fruits">
      <circle class="some" id="apple"/>
      <circle class="some" id="pear"/>
      <circle class="some" id="strawberry"/>
      ...
    </g>
    <g class="groups" id="vegetables">
      <circle class="some" id="carrot">
      <circle class="some" id="celery">
      ...
    </g>

私はこのようなことを試しました：



    d3.csv("data.csv", function(data) {
    var svg = ...
    var groups = svg.selectAll(".groups")
                  .data(data)
                  .enter().append("g")
                  .attr("class", "groups")
                  .attr("id", function(d) { return d.name; });

        groups.selectAll(".some")
        .data(data, function(d) { return d.id; })
        .enter().append("circle")
        .attr("class", "some")
        .attr("id", function(d) { return d.value; });
   });

しかし、それはすべての行を選択します。親のg要素と同じ名前の行だけを選択して入力する方法がわかりません。

4

1 に答える 1

1

これにはnest演算子を使用します。

var byName = d3.nest().key(function(d) { return d.name; })
                      .entries(data);
var groups = svg.selectAll(".groups").data(byName)
                .enter().append("g")
                .attr("class", "groups")
                .attr("id", function(d) { return d.key; });
var circles = groups.selectAll(".some")
                    .data(function(d) { return d.values; })
                    .enter().append("circle")
                    .attr("class", "some")
                    .attr("id", function(d) { return d.value; });
于 2013-07-22T12:47:19.723 に答える