小编Rya*_*man的帖子

我正在使用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') …

这里有另一个d3问题......

我正在重新构建我完成构建的条形图,因为我有很多组件和许多冗余转换,因为我不正确地使用了each()方法,性能非常糟糕......这有点挫败了在第一名!

但无论如何,我一直在密切关注mbostock的堆积条形图教程,但是在试图填充彼此的条形时遇到了一个问题.

相关代码如下:

var barWidth = (2.7*chartWidth)/(3.7*array.length - 1);
    //font size for bar labels
    var barNumberSize = (16.0 / 27) * barWidth;
    //font size for bubbles
    var bubbleNumberSize = (12.0 / 27) * barWidth;
    var barPadding = barWidth / 2.7;
    var maxBarHeight = chartHeight;
    var bubbleRadius = barWidth / 2;

    // create the svg object for the whole graphic
    var svg = d3.select('body')
        .append('svg')
        .attr('class','graphic')
        .attr('width', svgWidth)
        .attr('height', svgHeight)

    //create the section for the bar chart itself …