D3.jsを使用してテーブルに動的に行を追加する

Question

D3.jsでテーブルを作成する必要があります。問題は、テーブルに入れるデータが静的ではないことですが、新しい行を追加して行の一部の値を動的に更新する必要があります。私は、ウェブ上で読んだ 通常、すべてのチュートリアルでは、コードはそのようなものです：dataTableのは配列の配列です

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

。 しかし、私は、このようなソケットでテーブルに置くためにデータを取る：

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

テーブルの列は、文字列値とカウンタを持っているので、ソケット方式ですべての新しいデータのために私が受け取る、私はデータが存在するかどうかをチェックしてカウンタをインクリメントする必要があります。 どうすればいいですか？アドバイスをありがとう。

Answer 1

この問題は、データをDOM要素で結合することによって解決されます。私はこの機能に関するハンドルを得るために、Mike BostockのThinking with Joinsを強くお勧めします。 D3で処理される新しいデータの差分やチェックを行う必要はありません。あなたがしなければならないことの1つは、give each cell/row a unique keyです。そのため、新しい行と既存の行はD3によって適切に決定されます。