d3.js: add elements according to data-attribute value - d3.js

Question

I simplified example as much as possible. I have data.csv file and want to create elements as below (Result). Is there some elegant way? Thank you.
Data (data.csv):
id, name, value
1, fruits, apple
2, fruits, pear
3, fruits, strawberry
4, vegetables, carrot
5, vegetables, celery
...
Result:
<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&gt
I tried something like this:
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; });
});
But it selects all lines. I don't know how to select and enter only lines with the same name as parent g element.

Answer 1

You want to use the nest operator for this:
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; });