如何更新d3表？

Question

当鼠标移动时，我有一些问题要更新我的d3.js表。 这是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;});

理想情况下，您应该按照enter（），update（）和exit（）顺序进行此类d3更新，但对于这种情况，上述更改就足够了。

Answer 2

在http://bl.ocks.org/mbostock/3808218上有关于更新模式的精彩教程。

通常用于更新您应该有一个数据连接键，作为.data（values，key）中的第二个参数传递。

我使用输入，更新，删除模式更新了你的jsfiddle以供参考：

 var rows = table.selectAll("tbody tr")
.data(newdata, function (d) {return d.Variable;});

rows.enter()
.append('tr')
.selectAll("td")
.data(function (d) {return [d.Variable, d.Value];})
.enter()
.append("td")
.text(function(d) { return d; });

rows.exit().remove();

var cells = rows.selectAll('td')
.data(function (d) {return [d.Variable, d.Value];})
.text(function (d) {return d;});

cells.enter()
.append("td")
.text(function(d) { return d; });

cells.exit().remove();

https://jsfiddle.net/qL7knnkv/