綁定D3表骨幹收集

Question

所以我已經試過

 @table = d3.select("#search-results-area").append("table").attr("id","resultsTable").attr("class","visualization-panel") 
     @thead = @table.append("thead") 
     @tbody = @table.append("tbody") 
     @thead.append("tr").selectAll("th").data(@columns).enter().append("th").text((col)-> return col).on("click",(d)=>@tbody.selectAll("tr").sort(@sortingFunctionManager[d])) 
     @tbody.selectAll("tr").attr("class","spacing center-text") 
      console.log "tbody" 
     console.log 
     @rows = @tbody.selectAll("tr").data(@collection.models).append("tr") 
     console.log @rows 
     console.log @collection.models 
     cells = @rows.selectAll("td").data((model)=> 
     console.log "inside callback" 
     console.log model 
     return @columns.map((column)=> 
      return { column : column, val : model.get(column)} 
      ) 
     ).enter().append("td").text((d)=> 
      console.log "what is d" 
      console.log d 
      for column in @columns 
       if d.column == column 
        return d.val 
     ) 

細胞不會追加。實際上，沒有trs

Answer 1

在d3中，當您使用.data綁定數據集時，數據與您要綁定的DOM中的節點相互交叉關聯，並最終得到3組：

的.enter()基團，其表示在數據集中的新的元素不具有對應節點在DOM

的.exit()基團，其表示在DOM元素不具有相應的元件在數據集中

和一切else - 表示數據集中的元素在DOM中有相應的元素。

對於您的情況，您需要對.enter()元素（新數據）進行操作，並告訴d3在DOM中爲這些項目生成新節點。

在二維表中，你需要做的這兩次 - 每款新車型，這對於該模型（每個行），它代表了TD手機的每個新的屬性生成行，一次一次。

對於行，它看起來像這樣：

var rows = tbody.selectAll("tr") 
    // The function returns an identity value for the model 
    // - otherwise its just correlated by position 
    .data(myCol.models,function(d){return d.cid}) 
    // Ok, for any new models, add a TR to the table 
    .enter() 
     .append("tr"); 

的數據單元：

var cell = rows.selectAll("td") 
    // D3 is expecting an array of values, you'll probably want to 
    // generate this using your "columns" array 
    // the data value (d) is the Backbone model bound to each row 
    .data(function(d) { return [d.get('id'),d.get('name')] }) 
    // For each property ([id, name])append a TD cell 
    .enter().append("td") 
     .text(function(d) { return d; }); 

我們希望，這應該讓你開始。

這裏有一個工作的jsfiddle一起玩，那就說明這種行爲（及以上）：

http://jsfiddle.net/3SgnA/2/