Zeilen dynamisch in einer Tabelle mit D3.js hinzufügen

Question

Ich muss eine Tabelle in D3.js entwickeln. Das Problem ist, dass die Daten in der Tabelle nicht statisch sind, aber ich muss eine neue Zeile hinzufügen und dynamisch einige Werte in einer Zeile aktualisieren. Normalerweise jedes Tutorial, das ich im Internet gelesen haben, ist der Code wie folgt aus:

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

    thead = table.append("thead"); 
    tbody = table.append("tbody") 


    thead.append("tr") 
     .selectAll("th") 
     .data(rowLabel) 
     .enter() 
     .append("th") 
     .text(function (d) { 
     return d; 
    }); 
    var rows = tbody.selectAll("tr") 
     .data(dataTable) 
     .enter() 
     .append("tr"); 

    var cells = rows.selectAll("td") 
     .data(function (d, i) { 
      console.log(d); 
      return d; 
     }) 
     .enter() 
     .append("td") 
     .text(function (d) { 
      return d; 
     }); 

wo Datatable ein Array von Array ist. Aber ich nehme die Daten in der Tabelle wie folgt durch einen Sockel stellen:

socket.on('trendList', function (data) { 
     if (data is new) { 
      add a new row in the table; 
     } else update data in the table; 
}); 

Die Spalten der Tabelle haben einen String-Wert und einen Zähler, so dass für jede neue Daten in der Fassung Methode, die ich erhalte, ich muss prüfen ob die Daten vorhanden sind und den Zähler inkrementieren. Wie kann ich es tun? Danke in Beratung.

Answer 1

Dieses Problem wird gelöst durch Beitritt Daten mit DOM-Elementen. Ich empfehle Mike Bostock Thinking with Joins für einen Griff zu dieser Funktion. Sie müssen keine Differenzen machen und nach neuen Daten suchen, das alles wird von D3 gehandhabt. Eine Sache, die Sie jedoch tun müssen, ist give each cell/row a unique key, so dass neue vs. vorhandene Zeilen durch D3 geeignet bestimmt werden können.