Anton Anton - 2 months ago 7
Javascript Question

SVG rects don't appear in Firefox

I'm using D3.js to create a map from rectangles.

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;
})


And it works perfectly in Chrome and Opera, but in Firefox and Explorer SVG rectangles don't appear.
Here is my fiddle: https://jsfiddle.net/anton9ov/e2b925w2/

Answer

The problem is that you're setting the attributes (width and height) using CSS. Apparently, SVG 2 specification will allow attributes to be defined using CSS, and some browsers are starting to support that, but not all browsers support this yet.

If you set the attributes this way:

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

Your code will work. Here is the fiddle, which works in firefox: https://jsfiddle.net/mk4sxxbp/