Question

我必须在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;
});

表的列有一个字符串值和一个计数器，因此对于我收到的套接字方法中的每个新数据，我必须检查数据是否存在并递增计数器。我怎么能这样做？谢谢你的建议。

Answer 1

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

使用D3.js

1 个答案: