Question

我尽可能地简化了例子。我有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元素同名的行。

Answer 1

您想使用nest operator：

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; });

d3.js：根据数据属性值添加元素

1 个答案: