D3js. Работа с классами

Question

Я играю с круговыми диаграммами в d3.js. Я хочу иметь несколько диаграмм, работающих одновременно, и иметь возможность выбирать тот или иной по своему классу. Идея состоит в том, что есть основная диаграмма, и, щелкнув в разных областях, новые диаграммы должны появиться, отображая подкатегории. Вот фрагмент кода, который дает мне головную боль:

 // 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 + ")") 
     } 

Первый PieChart генерируется красиво (это вычерчивает позже), но диаграммы, которые я генерировать в течение цикла не будет. Я подозреваю, что это связано с тем фактом, что я генерирую «g» в svg, который уже имеет некоторые «g», поэтому есть какой-то конфликт, и они переопределяют? Я пытаюсь справиться с этим, назначая разные классы для каждого графика. Любая идея?

Спасибо всем!

Answer 1

Как отмечалось выше, при попытке создания диаграмм для цикла вы должны использовать более специфический селектор вместо использования общего селектора g, например "arc_" + i, если это разные классы, которые вы хотите назначить.

Причина, почему использование <g> селектора не генерирует новый график в том, что когда вы selectAll("g") и связать данные с помощью myPie(dataPie_i) в петле, d3 найдет предыдущее g генерируется из первого PieChart, поэтому выбор enter() не будет быть обновленным, в этом случае он пуст, <g> не будет добавлен. Более подробную информацию о данных соединения можно найти here.