在 d3.js 中插入子元素

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

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