私は次のhtml構造を持っています
<thead class="table-header">
<tr>
<th><div class="th-inner">a</th>
<th><div class="th-inner">b</th>
<th><div class="th-inner">c</th>
</tr>
</thead>
そして、クラスthでdivを追加したいのですが、div thのすぐ隣に、3つの要素(mydata = ['x'、 'y'、 'z'])を持つ単純なデータ配列に基づいた内部があります。
フォローしてみましたが、うまくいかないようです。
cells = d3.select('root').select('thead.table-header tr')
.selectAll('div.th-inner').data(mydata)
.selectAll('div.th-but').data(function(d,i){return d;});
cells.enter().append('div').classed('th-but', true);
私は何かが足りないのですか?私は解決策で正しい方向に進んでいますか?
のdiv.th-but
兄弟になりたい場合div.th-inner
は、親要素に追加する必要がありますth
。insert
これに使用することも、親要素を直接選択することもできます。
var cells = d3.select('.table-header tr')
.selectAll('th').data(mydata)
.selectAll('div.th-but').data(function(d) { return d; });
cells.enter()
.append('div')
.classed('th-but', true);
または
var cells = d3.select('.table-header tr')
.selectAll('div.th-inner').data(mydata)
.selectAll('div.th-but').data(function(d) { return d; });
cells.enter()
.insert('div')
.classed('th-but', true);
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加