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')

DO

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

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

2 个答案: