D3 - Textfarbe kann nicht über CSS-Klasse eingestellt werden

Question

Ich benutze d3.js, um ein Javascript-Diagramm zu erstellen, und versuche, mein Styling vom Verhalten so weit wie möglich zu trennen. Um dies zu tun, versuche ich CSS-Klassen mit der Methode .attr ('class', '...') anzuwenden, anstatt die .style() -Methode zu verwenden. In den meisten Fällen funktioniert alles gut. Wenn ich jedoch versuche, eine CSS-Klasse anzuwenden, um den Strich und die Füllung einiger Textelemente festzulegen, funktioniert es einfach nicht. Der Teil, der mich verwirrt hat, ist die Tatsache, dass der gleiche Prozess der Verwendung von .attr() zum Anwenden einer CSS-Klasse für die Balken des Graphen gut funktionierte, und dass ich kein Problem habe, den Text wie gewünscht zu formatieren, wenn ich genau benutze gleiche Attribute, aber stattdessen mit der .style() -Methode, um jeden einzeln einzustellen. Noch bizarrer kann ich die Methode .attr() verwenden, um eine Transparenzklasse über CSS ohne Probleme anzuwenden. Gibt es etwas, das mir hier fehlt?

Dies sind die CSS-Klassen in Frage:

.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); 
} 

und dies ist der Code, der aus irgendeinem Grund nicht funktioniert:

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() }); 

während dieser Code tut:

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

Um mehrere Klassen festzulegen, verwenden Sie eine einzige Zeichenfolge, die alle enthält, anstatt die Aufrufe zu verketten lch überschreibe es.

Das heißt, statt

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

tun

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

Answer 2

Es ist besser eingestuft verwenden

.classed('white', true); 

oder sogar

.classed('white transparent', true); 

Dies spart eine Menge Buchhaltung, welche Klasse später eingestellt/entfernt wurde. Das Hinzufügen eines angegebenen Klassennamens ist schwieriger. Siehe zB http://bl.ocks.org/clemens-tolboom/7231676