D3.js .append( ) on existing
and hierarchy

Question

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

saikiran.vsk · Accepted Answer

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

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

Tags:

append

d3.js

user3562812

1 Answers

saikiran.vsk

Recent Activity

Donate For Us