D3js. Working with classes - class

Question

I am playing around with pie charts in d3.js. I want to have several charts working at the same time, and be able to select one or another by their class. The idea is that there is a main chart, and by clicking in the diferent areas, new charts should emerge displaying sub-categories.
Here's the piece of code that is giving me a headache:
// myPie has been deffined previously as --> var myPie = d3.layout.pie();
// dataPie is an array such as --> [2,3,1,2]
// level2 is just an array of arrays containing the sub-sets of data I want to display in the pie-charts
var myArcs = mySvg.selectAll("g")
.data(myPie(dataPie))
.enter()
.append("g")
.attr("class","arc")
.attr("transform","translate(" + xCenter +"," + yCenter + ")" )
// Appending other arcs
for(i=0; i<allData.length; i++){
var dataLabels_i = [];
var dataPie_i = [];
for(j=0; j<level2[i].length; j++){
dataLabels_i[j] = level2[i][j][0]
dataPie_i[j] = level2[i][j][1]
}
var arcArray =[];
var rectArray =[];
arcArray[i] = mySvg.selectAll("g")
.data(myPie(dataPie_i))
.enter()
.append("g")
.attr("class","arc_"+i)
.attr("transform","translate(" + xCenter +"," + yCenter + ")" )
}
The first piechart is generated nicely (it's ploted later on), but the charts that I generate in the for loop won't. I suspect that it has to do with the fact that I am generating "g's" in an svg that already has some "g's", so there is some sort of conflict and they override? I try to cope with this by assigning different classes to each chart.
Any idea?
Thanks to everyone!

Answer 1

As Mark mentioned, while trying to generating charts for the loop, you should use a more specific selector instead of using the general g selector, such as "arc_" + i if that's the different classes you want to assign.
The reason why using <g> selector doesn't generate a new chart is that when you selectAll("g") and bind data by myPie(dataPie_i) in the loop, d3 will find the previous g generated from the first piechart, therefore the enter() selection won't be updated, it's empty in this case, <g> won't be appended. More details about join data can be found here.