如何更新d3表? [英] How to update d3 table?

问题描述

移动鼠标时，我在更新d3.js表时遇到了一些问题.这是jsfiddle中简化的示例.

I have some problem to update my d3.js table when mousemoving. Here is a simplified example in 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; });
};

也就是说，如何只更新表中的值，而不是一次又一次绘制新表?

namely, how can I only update the values in the table instead of drawing a new table again and again?

谢谢！

推荐答案

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

Use your previously defined selections(in jsfiddle example)

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

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

Using this selection, you can update the existing table. In your mouseover() function, you have used enter() as an attempt to update your table. But since enter() sees that required number of placeholders (2 placeholders for 2 rows) are already present, it will not do anything. You can update by removing enter() and append statements and doing something like:

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()顺序，但是对于这种情况，只需上述更改即可.

Ideally you should follow the enter(), update() and exit() sequence for such d3 updates, but for this situation just the above changes will suffice.

这篇关于如何更新d3表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！