我正在使用d3.js创建一个 javascript图表,并试图尽可能地将我的样式与行为分开.为此,我尝试使用.attr(‘class’,’…’)方法而不是使用.style()方法来应用CSS类.在大多数情况下一切正常.但是,当我尝试应用CSS类来设置笔划和填充某些文本元素时,它只是不起作用.让我感到困惑的部分是这样一个事实：使用.attr()来应用一个css类的相同过程对于图形的条形图工作得很好,并且如果我使用精确的文本,我没有问题如何设置文本的样式相同的属性,而是使用.style()方法单独设置每个属性.更奇怪的是,我可以使用.attr()方法通过css应用透明度类而没有任何问题.这里有什么我想念的吗？

这些是有问题的css类：

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

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

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

 .white {
    fill: rgb(255,255,255);
    stroke: rgb(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",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",bubbleNumberSize.toString() + "px")
        //works fine when written in this format.....why?
        .style('fill',white)
        .style('stroke',white)
        .attr('class',i) { return d['severity'].toString() });

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

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