D3 - 无法通过css类设置文本颜色

Question

我正在使用d3.js创建一个javascript图表,并试图尽可能地将我的样式与行为分开.为此,我尝试使用.attr('class','...')方法而不是使用.style()方法来应用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

最好使用分类

.classed('white', true);

甚至

.classed('white transparent', true);

这节省了大量的书籍,保留了以后设置/删除的类.添加数据提供的类名更加困难.见ie http://bl.ocks.org/clemens-tolboom/7231676

Answer 2

要设置多个类,请使用包含所有类的单个字符串,而不是链接调用,这将覆盖它.

也就是说,而不是

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

做

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