D3 - CSSのクラスでテキストの色を設定できません

Question

d3.jsを使用してJavaScriptチャートを作成しています。できるだけスタイリングを動作から分離しようとしています。これを行うには、.style（）メソッドを使用するのではなく、.attr（ 'class'、 '...'）メソッドを使用してCSSクラスを適用しようとしています。ほとんどの場合、すべてうまく動作します。しかし、CSSクラスを適用していくつかのテキスト要素のストロークと塗りつぶしを設定しようとすると、機能しません。私が混乱している部分は、.attr（）を使ってcssクラスを適用するのと同じプロセスがグラフのバーにうまく働いたということです。また、テキストをスタイリングするのに問題はありません。代わりに.style（）メソッドを使用してそれぞれを個別に設定します。さらに奇妙なことに、私は.attr（）メソッドを使ってcss経由で透明クラスを適用することができます。私がここに欠けているものはありますか？

これらは、問題のCSSクラスです：

.black { 
    fill: rgb(41,41,41); 
    stroke: rgb(41,41,41); 
} 

.red { 
    fill: rgb(238,77,77); 
    stroke: rgb(238,77,77); 
    color: rgb(238,77,77); 
} 

.blue { 
    fill: rgb(76,179,230); 
    stroke: rgb(76,179,230); 
} 

.white { 
    fill: rgb(255,255,255); 
    stroke: rgb(255,255,255); 
} 

は、これが何らかの理由で動作しません、コードです：

var severityText = chart.selectAll(".severity") 
     .data(array) 
     .enter().append("text") 
     .attr("x", function (d, i) { return x(i) + barWidth/2 - (5.0/8)*barNumberSize; }) 
     .attr("y", function (d, i) { return bubbleY(maxBubbleValue - d['severity']) - bubbleRadius/2 - bubbleNumberSize*(1.0/4) }) 
     .style("font-size", bubbleNumberSize.toString() + "px") 
     //this line isn't doing its job 
     .attr('class','white') 
     .attr('class','transparent') 
     .text(function (d, i) { return d['severity'].toString() }); 

をこのコードがないながら：

var severityText = chart.selectAll(".severity") 
     .data(array) 
     .enter().append("text") 
     .attr("x", function (d, i) { return x(i) + barWidth/2 - (5.0/8)*barNumberSize; }) 
     .attr("y", function (d, i) { return bubbleY(maxBubbleValue - d['severity']) - bubbleRadius/2 - bubbleNumberSize*(1.0/4) }) 
     .style("font-size", bubbleNumberSize.toString() + "px") 
     //works fine when written in this format.....why? 
     .style('fill',white) 
     .style('stroke',white) 
     .attr('class','transparent') 
     .text(function (d, i) { return d['severity'].toString() }); 

Answer 1

複数のクラスを設定するには、呼び出しを連鎖するのではなく、すべてのクラスを含む単一の文字列を使用します.wiそれを上書きします。ある

、代わりに

.attr('class','white') 
.attr('class','transparent') 

のは、それが分類使用することをお勧めします

.attr('class', 'white transparent') 

Answer 2

を行う

.classed('white', true); 

あるいは

.classed('white transparent', true); 

これは、後でどのクラスが設定/削除されたかを保持する多くの本を節約します。データ提供クラス名を追加することはより困難です。 ie http://bl.ocks.org/clemens-tolboom/7231676