d3条件付きでデータ属性を追加する



D3 Adding Data Attribute Conditionally



解決:

each()またはfilter()を呼び出す必要はありません... attr()関数はこれを内部的に行います。値の代わりに関数を使用して呼び出すだけで、その関数が各データに必要な値を返すようにします。特定のデータに属性が必要ない場合は、次のようにnullを返します。

... .attr( 'data-class'、function(d){return'data-class 'in d?d [' data-class ']:null;});

関数がnullを返す場合、属性は追加されません。次のような関数に属性名のマップを提供することで、複数の属性を1つの呼び出しに結合することもできます。



... .attr({'data-class':function(d){return'data-class 'in d?d [' data-class ']:null;}、' data-hide ':function(d) {return'data-hide 'in d?d [' data-hide ']:null;}、' data-ignore ':function(d){return'data-ignore' in d?d ['data-ignore' ] : ヌル; } });

または、あなたが私のようで、あまり入力したくない場合は、属性名のリストを適切なマップに減らすことができます。

... .attr(['data-class'、 'data-hide'、 'data-ignore']。reduce(function(result、attr){result [attr] = function(d){return attr in d? d [attr]:null;} return result;}、{})); 

の良い候補のようです。各():



var th = d3.select(selection).select( 'thead')。selectAll( 'th')。data(colspec).enter()。append( 'th')。text(function(d){return d [ 'data-name'];})//各アイテムを個別にアドレス指定するようになりました.each(function(d){var header = d3.select(this); //キーをループします-これは余分なデータがないと想定しますd3.keys( d).forEach(function(key){if(key!= 'data-name')header.attr(key、d [key]);});});

よく使う.eachアイテムごとのスコープを持つ場合は、各アイテムの一連の属性を把握しようとするよりも理にかなっています。

属性の短いリストの場合、特にオブジェクト内の余分なデータが心配な場合は、すべてではなく、目的のキーをループする方がおそらく簡単です。

.each(function(d){var header = d3.select(this); ['data-class'、 'data-hide'、 'data-ignore']。forEach(function(key){if(key in d )header.attr(key、d [key]);});}); 

あなたは使用することができます.filter()関数は、属性を設定する必要がある選択範囲のサブセットのみを操作します。



var th = d3.select(selection).select( 'thead')。selectAll( 'th')。data(colspec).enter()。append( 'th')。text(function(d){return d [ 'データ名'];}); th.filter(function(d){return( 'data-class' in d);})。attr( 'data-class'、function(d){return d ['data-class'];});