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/

D3.js＆gt;嵌套html结构中的绑定数据

1 个答案: