在d3中，如何爲數據創建不同的元素？

Question

例如，在html <table>中，<tr>可能包含<th>和<td>。你將如何將數據綁定到行選擇，將創建偶數列爲<th>和奇數爲<td>？

Answer 1

所以，這似乎也不完美，但總是有html（）方法。

​var d = [['a','b','c','d']]; 

var r = d3.select('#myTable').selectAll('tr') 
    .data(d); 

r.enter().append('tr').html(function(d) { 
    var i, s = ''; 
    for (i = 0; i < d.length; i += 1) { 
     s += (i%2===0) ? '<th>' : '<td>'; 
     s += d[i]; 
     s += (i%2===0) ? '</th>' : '</td>'; 
    } 
    return s; 
}​​​​​​​​​​​​​​​); 

Answer 2

我能想出是通過基於數據的索引應用類製作<td>看起來像一個<th>最好的：

var d = ['a','b','c','d','e','f','g']; 

var tr = d3.select("#myTableRow").selectAll("td") 
    .data(d).enter().append("td") 
    .text(function(d) { return d; }) 
    .classed("thLike", function(d,i) { return i%2===0; }); 

CSS：

.thLike { 
    font-weight: bold; 
} 

Answer 3

據我所知，你是對的 - 在標準D3成語中沒有辦法做到這一點。據推測，這將有可能一旦selection.append()可以採取的功能：

選擇。 追加（名）

與追加指定名稱的新元素......名稱必須指定爲常數，但在未來，我們可能會允許現有要素的追加或生成名稱的函數動態。

希望這樣的功能可以採用標準的(data, index)參數，並且可以解決這個問題。否則，目前，我無法從單個.enter()選擇中創建不同的元素 - .enter()僅支持.append，.insert和.select，其中沒有一個可以接受函數參數。

您可以通過改寫（munging）數據到元組，並得到一些你想要的雙附加到.enter()選擇，如下所示：http://jsfiddle.net/xuJ6w/4/

// munge data 
var tuples = data.map(function(row) { 
    var newRow = [], 
     x; 
    // create array of objects 
    for (x=0; x<row.length; x+=2) { 
     newRow.push({ 
      label: row[x], 
      value: row[x+1]    
     }) 
    } 
    return newRow; 
}); 

var rows = d3.select('table').selectAll('tr') 
    .data(tuples); 

rows.enter().append('tr'); 

var cellPairs = rows.selectAll('.cell') 
    .data(function(d) { return d; }); 

var entry = cellPairs.enter(); 
entry.append('th') 
    .attr('class', 'cell') 
    .text(function(d) { 
     return d.label; 
    }); 
entry.insert('td', 'th + th') 
    .attr('class', 'cell') 
    .text(function(d) { 
     return d.value; 
    }); 

但你可以看到，當更新被稱爲：

cellPairs 
    .style('background', '#CCC'); 

只有最後添加的節點被更新，所以數據還沒有被完全綁定。

Answer 4

https://github.com/mbostock/d3/wiki/Selections#wiki-data

選擇器也可以相交（ 「.this.that」 爲邏輯與）或 聯合在一起（ 「這，。那」 邏輯OR）。

所以，像這樣的東西可能適合你。我還沒有測試，但（如果選擇不工作，你可以添加同一類到每個TD/TH細胞，並選擇與TR .myClass）：

var cells = tableRow.selectAll("TD, TH").data(data); 
cells.enter().each(d, i) { 
    var cell = d3.select(this); 
    cell.append(i%2 ? "TD" : "TH"); 
})