D3js。使用類

我在玩d3.js中的餅圖。我希望有幾個圖表同時工作，並且能夠通過他們的班級選擇一個或另一個。這個想法是有一個主要的圖表，通過點擊不同的區域，新的圖表應該顯示出子類別。下面是一段代碼，是讓我頭疼：D3js。使用類

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

第一個餅圖是很好的生成（它ploted以後），但我在生成的循環圖表不會。我懷疑這與我在一個已經有一些「g's」的svg中產生「g's」的事實有關，所以存在某種衝突並且它們被覆蓋了？我試圖通過爲每個圖表分配不同的類來應對這種情況。有什麼想法？

感謝大家！

來源

2015-12-24 Gonzalo Franco Ceballos

將此添加到工作小提琴中。 – Cyril

@Cyril提到，很難回答這個問題，但沒有多少工作*代碼，但乍一看，你的'mySvg.selectAll（「g」）。data（...'是非常有問題的，這告訴'd3'在你的svg中找到'g'並計算出一個選擇，因爲第一個繪圖附加了'g's，第二個繪圖將選擇那些而不是附加一個新的繪圖，你需要像'mySVG.selectAll（' .arc_'+ i）.data（...' – Mark

正如Mark提到的，在嘗試爲循環生成圖表時，應該使用更具體的選擇器，而不是使用通用的g選擇器，例如"arc_" + i，如果這是您要分配的不同類。

爲什麼使用<g>選擇不會產生一個新的圖表的原因是，當你selectAll("g")和myPie(dataPie_i)在循環數據綁定，D3會發現從第一個餅圖生成以前g，因此enter()選擇不會被更新，在這種情況下它是空的，<g>不會被追加。有關加入數據的更多詳細信息，請參閱here。

來源

2015-12-24 23:54:03 fengshuo

回答

相關問題