私はd3クラスのセレクションを使用しており、最初のパラメーターでは、文字列ではなく、クラス名を返す関数を使用したいと考えています。
selection.classed(name[, value])
ここ.attr()
で述べたのと同じことができることは理解していますが、classed を使用して同じことができるようにしたいと考えています。
これどうやってするの?
私はd3クラスのセレクションを使用しており、最初のパラメーターでは、文字列ではなく、クラス名を返す関数を使用したいと考えています。
selection.classed(name[, value])
ここ.attr()
で述べたのと同じことができることは理解していますが、classed を使用して同じことができるようにしたいと考えています。
これどうやってするの?
そこで提供するクラス名は固定する必要があります。つまり、 のようなものは使用できませんfunction(d) { return d; }
。データによってクラス名を決定する必要がある場合は、 を使用する必要があります.attr("class", ...)
。
既存のクラス名を上書きすることが心配な場合は、次のようにそれらを取得して先頭に追加できることに注意してください。
.attr("class", function(d) { return d3.select(this).attr("class") + " " + d; })
データムのプロパティが true の場合は 1 つのクラスを追加し、プロパティが false の場合は別のクラスを追加するという同様の問題に遭遇しました。
selection.classed('class-one', function(d) { return d.property; })
.classed('class-two', function(d) { return d.property; });
追加するクラスの数が少ない場合は、このようなものを検討する価値があります。
Larsの答えは素晴らしいですが、属性にクラスがない状態で開始すると、null属性が文字列に強制されるため、クラス「null」が要素に追加されます。彼からの自然な次のステップ:
.attr("class", function(d) {
var existing = d3.select(this).attr("class")
if (existing == null){
return d.column.class
}else{
return existing + " " + d.column.class
}
})
より簡潔にしたい場合は、これを三項演算子を使用してワンライナーにすることができます