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/