D3.js v3堆叠柱状图在Firefox中样式失效问题排查

我最近用D3.js版本3做了个堆叠柱状图，照着CodePen上的模板改完适配需求后，在Chrome里显示完全正常，但到Mozilla Firefox里一看，柱子居然没有颜色，全是空白的！折腾了好一阵才找到解决办法，分享给大家：

先贴出我当时的核心代码片段（原代码未完整贴出，核心部分如下）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>d3.js learning</title>
  <!-- 替换CodePen的依赖引入为标准CDN链接 -->
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    /* 我最初尝试用CSS给柱子设置颜色 */
    .bar {
      fill: steelblue;
    }
  </style>
</head>
<body>
  <svg width="800" height="600"></svg>
  <script>
    // 堆叠布局初始化与数据处理
    var stack = d3.layout.stack();
    // 假设data是已准备好的堆叠数据
    var layers = stack(data);
    var width = 800, height = 600;
    var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
    var y = d3.scale.linear().range([height, 0]);

    // 绘制堆叠层与柱子
    var layer = d3.select("svg").selectAll(".layer")
      .data(layers)
      .enter().append("g")
      .attr("class", "layer");

    layer.selectAll(".bar")
      .data(function(d) { return d; })
      .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return y(d.y + d.y0); })
      .attr("height", function(d) { return y(d.y0) - y(d.y + d.y0); })
      .attr("width", x.rangeBand());
  </script>
</body>
</html>

问题根源 #

Chrome和Firefox在处理SVG元素的样式逻辑上存在差异：Chrome对SVG元素的类选择器样式支持较为宽松，但Firefox对于SVG的fill属性，要么需要直接通过元素属性设置，要么需要精准的CSS选择器才能生效；另外如果使用D3的style()方法设置填充色，Firefox也可能无法正确解析。

修复方案 #

• 优先使用D3的attr()方法直接设置填充色
  这是最稳妥的跨浏览器方案，直接给SVG的rect元素设置fill属性，绕过CSS解析差异：

  // 定义分类颜色比例尺，自动分配不同颜色
  var color = d3.scale.category20();
  
  // 在绘制柱子时添加fill属性
  layer.selectAll(".bar")
    .data(function(d) { return d; })
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return y(d.y + d.y0); })
    .attr("height", function(d) { return y(d.y0) - y(d.y + d.y0); })
    .attr("width", x.rangeBand())
    .attr("fill", function(d, i) { return color(i); }); // 绑定颜色比例尺
  

  这种方式直接操作SVG元素的属性，所有主流浏览器都能正确识别。

• 若坚持使用CSS，提升选择器优先级
  如果你一定要用CSS控制颜色，需要确保选择器足够精准，覆盖浏览器的默认样式：

  /* 精准命中SVG内的bar元素 */
  svg g.layer rect.bar {
    fill: steelblue !important;
  }
  

  不过这种方式不推荐，!important容易引发样式冲突，且可靠性不如直接设置元素属性。

• 检查颜色值格式
  确保使用Firefox支持的标准颜色格式，比如十六进制（#ff0000）、RGB（rgb(255,0,0)）或HSL（hsl(0, 100%, 50%)），避免使用Chrome兼容的非标准颜色名称。

按照上述方法修改后，Firefox里的堆叠柱状图就能正常显示颜色啦！

内容的提问来源于stack exchange，提问作者Oleksandr Baranov