Question

我正在使用D3.js从矩形创建地图。

svg1.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("class", function(d, i) {
        for (i=0; i<d.value.length; i++) {
        if (d.value[i].victory == "winner") {
            var winnerRes = d.value[i].result
        };
      }
      if (winnerRes <= 49) { return "color4050" }
      else if (winnerRes >= 50 && winnerRes <= 59) { return "color5060" }
      else if (winnerRes >= 60 && winnerRes <= 69) { return "color6070" }
      else if (winnerRes >= 70 && winnerRes <= 79) { return "color7080" }
      else if (winnerRes >= 80 && winnerRes <= 89) { return "color8090" };
    })
        .attr("x", function (d) {
        return d.value[0].xCoord;
    })
        .attr("y", function (d) {
        return d.value[0].yCoord;
    })

它在Chrome和Opera中完美运行，但在Firefox和Explorer中，SVG矩形不会出现。这是我的小提琴：https://jsfiddle.net/anton9ov/e2b925w2/

Answer 1

问题在于您使用CSS设置属性（宽度和高度）。显然，SVG 2规范将允许属性为defined using CSS，并且一些浏览器开始支持该属性，但并非所有浏览器都支持此属性。

如果您以这种方式设置属性：

.attr("width", "28px")
.attr("height", "28px")

您的代码将有效。这是小提琴，适用于firefox：https://jsfiddle.net/mk4sxxbp/

SVG rects不会出现在Firefox中

1 个答案: