0

I am using this example to create a zoomable treemap. I have set the colors to d3.scale.category10(). 

function rect(rect) {
    rect.attr("x", function(d) { return x(d.x); })
        .attr("y", function(d) { return y(d.y); })
        .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
        .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); })
        .style("background", function(d) { return d.parent ? color(d.name) : null; })
        .attr("class", "treemapRect");
}

The above function is called every time a rect is selected. The line that sets the background is supposed to render each rect as a different color in the d3 category 10 scheme. It works perfectly fine in Chrome and Opera. In Firefox, however, the rects do not appear to have any color, despite having a value assigned in the inspector. A rect will show the following attributes in the inspector:

background-color: rgb(31, 119, 180);
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-clip: border-box;
background-origin: padding-box;
background-position-x: 0%;
background-position-y: 0%;
background-size: auto auto;

For comparison, Chrome shows that a rect will have these attributes:

background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: rgb(227, 229, 229);

Why is Firefox not displaying what is shown in the inspector?

samiam
  • 27
  • 4
  • 2
    That’s a chrome bug – Robert Longson Dec 04 '17 at 20:14
  • 1
    Works fine something wrong with your code check the code sample on code pen I created https://codepen.io/nikhil_618/pen/qVvKNO – saNiks Dec 04 '17 at 20:50
  • 1
    That's a Chrome/Opera bug. Firefox is correct here. – Gerardo Furtado Dec 04 '17 at 21:01
  • 1
    Shouldn't you just use `fill`? – Eric Guan Dec 04 '17 at 21:34
  • 2
    @RobertLongson Although *I*, as someone having some background (LOL) in this, consider the comments of Gerardo and yours as quite delightful, to any novice developer they must be all Greek and not constructive. I wasn't myself able to find an *exact* duplicate of this particular case. However, there is [*"Background color of text in SVG"*](/q/15500894), which seems a good enough fit. I'd like to suggest you use the force bestowed upon you and dupe-hammer this. Otherwise, I am afraid we will—again—not be able to get enough CVs. – altocumulus Dec 04 '17 at 22:16
  • @altocumulus I'm not sure if that's an **exact** duplicate... I believe that the issue here is that OP simply mistook `background-color` for `fill`... in the other question, on the contrary, OP is asking for a real background, not a fill. What do you reckon? – Gerardo Furtado Dec 05 '17 at 00:29
  • @GerardoFurtado Yes, that's why there is still no CV, i.e. not even my own... It's a *kinda-dupe*. We have all seen this issue in various flavours, which is why it looks that familiar. Here, the browser issue is just adding to the confusion by implying that using `background-*` was a legitimate option blaming the error on Firefox. In that sense more of an XY-problem (well, kinda-XY). The real issue is the same as in the question I linked to. Plus, the accepted answer is clear, helpful and to the point. That said, I rest my case: here is my CV! – altocumulus Dec 05 '17 at 00:41
  • @GerardoFurtado Furthermore, the other question as well as the accepted answer have proven helpful judging by the sheer amount of upvotes they received. – altocumulus Dec 05 '17 at 00:44

0 Answers0