CODEWITHSUNDEEP
javascriptcssd3.jscss-selectors
Douglas
Douglas

Reputation: 53

Insert child elements in d3.js

I am trying to create a table using D3.js, but td elements are not nesting inside the tr.

This is what I am trying to create:

        <table>
            <tr>
                <td>Name</td>
                <td>Value</td>
            </tr>
        </table>

This is what I've tried:

    var myTable = d3.select("#myTable")

    var myTableRow = myTable.selectAll("tr")
        .data(myData);

    myTableRow.enter()
        .append("tr")
        .insert("td", ":first-child")
        .html(function(d) {
            return d.name;
        })
        .insert("td", ":first-child")
        .html(function(d) {
            return d.value;
        });

However, each td does not nest inside the tr.

Upvotes: 2

Views: 1966

Answers (1)

potatopeelings
potatopeelings

Reputation: 41065

var myTable = d3.select("#myTable")

var myTableRow = myTable.selectAll("tr")
    .data(myData)
    .enter()
    .append("tr")

myTableRow.append("td", ":first-child")
    .html(function (d) {
        return d.name;
    })
myTableRow.append("td", ":first-child")
    .html(function (d) {
        return d.value;
    });


var myData = [
  { name: 'a', value: 1 },
  { name: 'b', value: 2 },
]

var myTable = d3.select("#myTable")

var myTableRow = myTable.selectAll("tr")
        .data(myData)
        .enter()
        .append("tr")

myTableRow.append("td", ":first-child")
  .html(function (d) {
     return d.name;
  })
myTableRow.append("td", ":first-child")
  .html(function (d) {
     return d.value;
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<table id="myTable">
</table>

Upvotes: 7

Related Questions