使用 D3.js 在表中动态添加行答案

【问题标题】：Adding rows dynamically in a table with D3.js使用 D3.js 在表中动态添加行
【发布时间】：2016-09-29 04:00:54
【问题描述】：

我必须在 D3.js 中开发一个表。问题是要放入表中的数据不是静态的，但我必须添加一个新行并动态更新一行中的一些值。通常我在网上看过的每个教程，代码都是这样的：

var table = d3.select("body").append("table");

    thead = table.append("thead");
    tbody = table.append("tbody")


    thead.append("tr")
        .selectAll("th")
        .data(rowLabel)
        .enter()
        .append("th")
        .text(function (d) {
        return d;
    });
    var rows = tbody.selectAll("tr")
        .data(dataTable)
        .enter()
        .append("tr");

    var cells = rows.selectAll("td")
        .data(function (d, i) {
            console.log(d);
            return d;
        })
        .enter()
        .append("td")
        .text(function (d) {
            return d;
        });

其中 dataTable 是一个数组数组。但是我通过这样的套接字将数据放入表中：

socket.on('trendList', function (data) {
      if (data is new) {
          add a new row in the table;
      } else update data in the table;
});

表的列有一个字符串值和一个计数器，所以对于我收到的套接字方法中的每个新数据，我必须检查数据是否存在并增加计数器。我该怎么做？感谢您的建议。

【问题讨论】：

标签： javascript d3.js html-table

【解决方案1】：

这个问题可以通过加入数据和DOM元素来解决。我强烈推荐 Mike Bostock 的 Thinking with Joins 来了解此功能。您不需要对新数据进行任何差异和检查，这一切都由 D3 处理。不过，您需要做的一件事是give each cell/row a unique key，以便 D3 可以适当地确定新行与现有行。

【讨论】：