javascript - How to update d3 table? -

i have problem update d3.js table when mousemoving. here simplified example in jsfiddle.

here main code:

 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 update values in table instead of drawing new table again , again?

thank you!

use defined selections(in jsfiddle example)

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

using selection, can update existing table. in mouseover() function, have used enter() attempt update table. since enter() sees required number of placeholders (2 placeholders 2 rows) present, not anything. can update removing enter() , append statements , doing 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;}); 

ideally should follow enter(), update() , exit() sequence such d3 updates, situation above changes suffice.