Javascript D3.js>；嵌套html结构中的绑定数据

我是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 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});

见：

---

谢谢，谢谢，谢谢。这正是我在创建了一个d3.nest（）之后一直在寻找的，它有一个键和一个值[]

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});