6

たとえば、 html<table>では、 aにand<tr>が含まれる場合があります。偶数列と奇数列を作成する行選択にデータをバインドするにはどうすればよいでしょうか?<th><td><th><td>

4

4 に答える 4

3

したがって、これも完璧ではないように見えますが、常に 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;
}​​​​​​​​​​​​​​​);
于 2012-08-28T14:52:39.753 に答える
2

私が知る限り、あなたの言う通りです。標準の D3 イディオムではこれを行う方法はありません。おそらくこれはselection.append()、関数を取ることができれば可能になります：

選択。追加(名前)

指定された名前で新しい要素を追加します...名前は定数として指定する必要がありますが、将来的には既存の要素または関数を追加して名前を動的に生成できるようにする可能性があります。

そのような関数が標準の(data, index)引数を取り、この問題を解決することを願っています。それ以外の場合、現時点では、単一の.enter()選択からさまざまな要素を作成する方法はありません. 、、および.enter()のみをサポートし、いずれも関数引数を取ることはできません。.append.insert.select

ここに示すように、データをタプルに変更し、.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');

最後に追加されたノードのみが更新されるため、データは完全にバインドされていません。

于 2012-08-28T18:01:10.320 に答える
1

私が思いつくことができる最善の方法は、データのインデックスに基づいてクラスを適用することにより、の<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;
}
于 2012-08-27T20:07:58.503 に答える
0

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

セレクターは、交差 (論理 AND の ".this.that") または結合 (論理 OR の ".this, .that") することもできます。

したがって、このようなものがうまくいくかもしれません。私はまだテストしていません (この選択が機能しない場合は、同じクラスを各 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");
})
于 2012-08-28T23:28:09.493 に答える