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

我尽可能简化了这个例子。我有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>

但它会选择所有行。我不知道如何只选择和输入与父g元素同名的行。

您想使用以下方法：

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

---

很有效，谢谢。如果我想从不同的文件加载关于圆的数据，例如data2，该怎么办？同样的事情。您可能需要调整属性名称，但原理是一样的。它看起来很有效，但经过一些实验后，我意识到它不起作用。当我复制粘贴并尝试您的示例时，结果是不同的。g元素是可以的，但每个元素中只有一个圆圈。你有完整的例子吗？好吧，愚蠢的输入错误-第一个参数到第二个参数。数据调用应该是函数。。。我会在回答中解决这个问题。

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