D3.js > binding data in nested html structure

Question

I'm a pretty new to D3 and after two days I am still stuck with an issue I can't solve.

I have a this JSON structure:

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

What I am trying to achieve is to build an html structure of this type:

<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>

I can easily build the first unordered list in this way:

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

but then I have some big issue to understand how to create the second nested list. What I am basically missing is to understand how to recursively create another list inside each list item, containing a list item per each bar. Any help or explanation is really appreciated

ee2Dev · Accepted Answer · 2015-05-17 10:24:23Z

3

You can loop through the nested structure as follows:

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

See: http://jsfiddle.net/ee2todev/mpc3uzp8/

edited May 17, 2015 at 10:24

answered May 17, 2015 at 10:15

ee2Dev

2,00822 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hoektoe Over a year ago

Thank you , thank you thank you. This is just what I was looking for after I have created a d3.nest() which has a key and values[]

Collectives™ on Stack Overflow

D3.js > binding data in nested html structure

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related