如何更新d3表？

Question

當mousemoving時我有一些更新我的d3.js表的問題。這裏是jsfiddle中的一個簡化的example。

下面是主要代碼：

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個）已經存在，所以它不會執行任何操作。您可以通過刪除輸入（）和追加陳述和做類似更新：

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;}); 

理想情況下，你應該遵循輸入（），更新（）和exit（）序列這種D3更新，但這種情況只上述更改就足夠了。

Answer 2

在http://bl.ocks.org/mbostock/3808218有一個很好的關於更新模式的教程。

通常用於更新您應該有一個用於數據連接的鍵，作爲.data（值，鍵）中的第二個參數傳遞。

我你的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/