d3テーブル動的列の左境界線

Question

d3テーブルを操作しようとしています。

// this code works 
tbody.selectAll('td:nth-child(4)') 
.style('border-left', '1px solid #000000'); 

が、私は動的配列に格納されたn番目の子のインデックスを選択したかった。だから、次の行は動作します。

//does not work 
tbody.data([3,5,8,11]) 
.enter() 
.selectAll('td:nth-child(' + function(d) { return d + ')'; }) 
.style('border-left', '1px solid #000000'); 

私はエラーを取得しておいてください。

TypeError: tbody.data(...).enter(...).selectAll is not a function

は私が間違って何をしているのですか？どんな助けやヒントもありがとうございます。

Answer 1

私は完全に間違っているかもしれませんが、あなたはDOM要素にデータをバインドしたくないと思われます：[3,5,8,11]配列はちょうど操作したい子の番号です。

ループは、D3コードではぼやけています（ほとんどの場合、ループは不要です）。上記の私の仮定が正しい場合は、これはループを使用するための十分な状況です：

selectionは、テーブルのためのあなたのD3の選択である

[3,5,8,11].forEach(function(d){ 
    selection.selectAll('td:nth-child(' + d + ')') 
     .style('border-left', '1px solid #000000'); 
}); 

。

また、より慣用的な解決策では、あなたのtdの選択肢で2番目の引数（インデックス）を使用するだけで、悪名高いループを避けることができます。このようなもの：

.style('border-left', function(d,i){ 
    if([3,5,8,11].indexOf(i) > -1){ 
     return '1px solid #000000' 
    } 
})