D3.js>在嵌套的html結構中綁定數據

Question

我對D3很新，在兩天之後，我仍然遇到了一個我無法解決的問題。

我有此JSON結構：

var countries = [ 
        { 
         name: "Germany", 
         total:1000, 
         bars:[ 
          { 
           color: '#123456', 
           values: [100,200] 
          }, 
          { 
           color: '#123456', 
           values: [100,200] 
          } 
         ] 
        }, 


        { 
         name: "Sweden", 
         total:800, 
         bars:[ 
          { 
           color: '#cccccc', 
           values: [100, 300] 
          } 
         ] 
        }, 

        { 
         "name":"Netherlands", 
         total:200, 
         bars:[ 
          { 
           color: '#123456', 
           values: [100,200] 
          } 
         ] 
        } 
      ]; 

我想實現是建立這種類型的HTML結構：

<ul class="ranking"> 
    <!--one li element per object inside countries JSON structure --> 
    <li> 
     <ul class="bar"> 
      <!--one li element per bar object inside each country --> 
     </ul> 
    </li> 

</ul> 

我可以輕鬆地構建在第一無序列表這樣：

var rankingUL = svg.append("ul").attr ("class", "ranking") 
var rankingLI = rankingUL.selectAll("li") 
       .data(countries) 
       .enter() 
       .append("li") 

var rankingULBars = rankingLI.append("ul").attr("class", "bar"); 

但後來我有一些大問題，以瞭解如何創建第二個嵌套列表。我基本缺少的是瞭解如何在每個列表項中遞歸創建另一個列表，每個列包含一個列表項。任何幫助或解釋非常感謝

Answer 1

你可以通過嵌套結構循環，如下所示：

var rankingLI = rankingUL.selectAll("li") 
      .data(countries) 
      .enter() 
      .append("li") 
      .text(function(d) {return d.name;}); 

var rankingULBars = rankingLI.append("ul") 
      .attr("class", "bar") 
      .selectAll("li") 
      .data(function(d) {return d.bars;}) 
      .enter() 
      .append("li") 
      .text("bar") 
      .style("background-color", function(d) {return d.color}); 

參見： http://jsfiddle.net/ee2todev/mpc3uzp8/