Adobe Edge Animate and d3.js: d3.scale.range([value]) not working properly in Chrome and Safari

Question

I'm trying to create a bar chart using Adobe Edge Animate and d3.js.

I'm having some difficulties with how the different browsers displays the axes. Here is a link to a d3 chart only containing axes and no data (the code is in d3example2_edgeActions.js):

http://www.nyhetsgrafikk.no/demo/d3example2/d3example2.html

• Mozilla Firefox and Opera: everything works
• Chrome and Safari: ticks are stacked on top of each other to the left

I believe this has to do with d3.scale.range([value]) not working properly - all though it does set the range of the chart (when I change the range and run the code my chart is changed), the ticks are stacked on top of each other. Chrome is not returning any errors. Any ideas to how I can fix this?

Answer 1

Turns out the range wasn't the problem. By adding a webkit-transform to my ticks and axis text everything now works fine

.style("-webkit-transform", function(d){ return "translate(" + 0 + "px," + y(d) + "px)"; });

Adding a webkit-transform also does the trick if you're trying to create a d3 pie chart with edge animate, and probably in all other cases where you're using transform in d3. You might also want to add a ms-transform: http://www.w3schools.com/css/css3_2dtransforms.asp