Question

我正在尝试使用D3.js创建一个表，但是td元素没有嵌套在tr中。

这就是我想要创建的内容：

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

这是我尝试过的：

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

但是，每个td都没有嵌套在tr。

中

Answer 1

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

＆＃13;

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

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<table id="myTable">
</table>

＆＃13;

在d3.js中插入子元素

1 个答案: