javascript - 如何更新 d3 表？

Question

我在移动鼠标时更新我的​​ d3.js 表时遇到了一些问题。这是一个简化的 example在 jsfiddle 中。

主要代码如下:

 function mousemove() {

  var newdata = [{Variable: "x", Value: 1}, {Variable: "y", Value: 1}]

  table.selectAll("tbody.tr")
    .data(newdata)
    .enter()
    .append("tr")
    .selectAll("td")
    .data(function(row) {
      return columns.map(function(column) {
        return {column: column, value: row[column]};
      });
    })
    .enter()
    .append("td")
    .text(function(d) { return d.value; });
};

即，如何只更新表中的值而不是一次又一次地绘制新表？

谢谢!

Answer 1

使用您之前定义的选择(在 jsfiddle 示例中)

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

使用此选择，您可以更新现有表格。在您的 mouseover() 函数中，您已使用 enter() 尝试更新您的表格。但是由于 enter() 发现所需数量的占位符(2 行 2 个占位符)已经存在，因此它不会执行任何操作。您可以通过删除 enter() 和 append 语句并执行类似以下操作来更新:

tbody.selectAll("tr")
  .data(newdata)
  .selectAll("td")
  .data(function(row) {
    return columns.map(function(column) {
      return {
        column: column,
        value: row[column]
      };
    });
  })
  .text(function(d) {return d.value;});

理想情况下，对于此类 d3 更新，您应该遵循 enter()、update() 和 exit() 顺序，但对于这种情况，仅上述更改就足够了。