在 d3.js 中插入子元素答案

【问题标题】：Insert child elements in d3.js在 d3.js 中插入子元素
【发布时间】：2015-07-14 11:25:16
【问题描述】：

我正在尝试使用 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 内。

【问题讨论】：

是否有一个 CSS 选择器可以用来点击 tr，以便将第二个 td 添加到 tr 内而不是第一个 td 内？
如果您希望提升未提供的层次结构 - groups.google.com/forum/#!topic/d3-js/mEjem7IPshY。您可以尝试其他选项 - 但基于变量的方法似乎最清晰。

标签： javascript css d3.js css-selectors

【解决方案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 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>

【讨论】：

谢谢。这可行，但是当我尝试添加新数据时，元素会被添加两次。
如何添加新数据？