CODEWITHSUNDEEP
d3.jsappend
user3562812
user3562812

Reputation: 1829

D3.js .append( ) on existing <div> and hierarchy

According to my code, it looks like key_square and key_line divisions should be sibling elements to key_row since I am appending them to the division "key", but they are descendants of key_row.

Could someone explain this to me?

Thank you,

<body>

    <div id="timeseries"> 
    </div>

    <div id="key"> 
    </div>

    <script>
       var key = d3.select("#key")
           .selectAll("div")
           .data(data)
           .enter()
           .append("div")
               .attr("class","key_row")
               .attr("id",function (d){ return d.line_id;})

//add square
            key.append("div")
               .attr("class", "key_square")
           .style("background-color","#C8DAF8")

//d3.select("#key")
        key.append("div")
            .attr("class","key_id")
            .attr("id","key_line")
            .style("background-color","#E9F0FC")
            .text(function (d) { return d.line_id;});

Upvotes: 12

Views: 29318

Answers (1)

saikiran.vsk
saikiran.vsk

Reputation: 1796

Let us discuss the code one by one, first one

var key = d3.select("#key")
           .selectAll("div")
           .data(data)
           .enter()
           .append("div")
               .attr("class","key_row")
               .attr("id",function (d){ return d.line_id;})

In the above code we have selected the div using id, appending divs here the number of divs are created according to the length of the data and then we are specifying the class and ids to these divs, after execution of these code d3 will returns an array containing these divs, so now the variable key holds these newly created divs. If you want to see that write one console.log(key) stmt after above code.

second

key.append("div")
               .attr("class", "key_square")
           .style("background-color","#C8DAF8")

Here we are appending divs to key, means this append function is called on one one div which are holding by key, so after execution of this code divs are created inside as descendant to above created divs.

third

key.append("div")
            .attr("class","key_id")
            .attr("id","key_line")
            .style("background-color","#E9F0FC")
            .text(function (d) { return d.line_id;});

Here also the same thing we are again calling append function on Initially created divs, so the same thing will happens here too. divs are added as descendant to initially created divs.

So that's how it works. This much I can say. If any where made a mistake point it. Thanks

Upvotes: 21

Related Questions