D3.JS Firefox Bug Fix

1

This is just an unasked-for but potentially useful anecdote for anyone working on the D3.JS/Data Visualization projects:
I just discovered that while it is possible to set certain attributes (like width, height, x, y, cx, cy, r…) with .style({ 'attrName1' : 'attrValue1', 'attrName2' : 'attrValue2' (and so on...) }) instead of .attr('attrName', 'attrValue') in some browsers, this may actually cause your programs to break when viewed on Firefox.

For example, in this bit of code, I was setting the width, height, x, and y values of an svg rect with .style() and consequently, the rect wasn’t appearing at all in Firefox (though it showed up fine in Chrome and Safari):

           .style(
'width' : '16px',
'height' : '11px',
'x' : function (d) { return d.x;},
'y' : function(d) { return d.y;},
'fill', 'red'}
             )```

Whereas this version worked on Firefox as _well_ as Safari, and Chrome:
``` .append('rect')
             .attr('x', function (d) { return d.x; } )
             .attr('y', function (d) { return d.y; })
           .attr('width', '16px')
           .attr('height', '11px')
           .style(
               'fill', 'red'
             )```
1 Like