...

View Full Version : SVG Graph Generated Using D3.js disappearing when scrolling in Safari



boko
07-17-2012, 08:36 PM
I have a Rails webapp currently deployed at http://orbit-analytics.herokuapp.com/user/2990 which utilizes D3.JS and JavaScript to generate an SVG graph of the specific user's uploads with relation to time. The graph renders correctly in Chrome, Safari, and Firefox but highlighting the tick labels or scrolling can cause parts of the graph to disappear in Safari (but not Chrome or Firefox). This isn't a problem on another page with a similar graph, available at http://orbit-analytics.herokuapp.com/video/10.

Is this a Safari issue or some problem with my code? Thanks.

DrDOS
07-18-2012, 01:17 AM
I'm think that maybe safari has trouble with the way the width and height are stated. I've found it best to use a style statement inside the svg tag itself.
style="width: 600px;height: 400px;"
and any other style info for the svg just like css.

boko
07-18-2012, 01:35 AM
Thanks, I actually figured this out before seeing your post, but the fix did involve moving the stroke style for the gridlines from the CSS style tag into a D3 .style() tag. Not sure why that worked but it did.

Would you have any idea how to add the minor gridlines seen on the graph at the bottom of http://orbit-analytics.herokuapp.com/video/10? I'm sure it involves .tickSubdivide(true) but I'm failing to get it to work.

DrDOS
07-18-2012, 02:37 AM
Thanks, I actually figured this out before seeing your post, but the fix did involve moving the stroke style for the gridlines from the CSS style tag into a D3 .style() tag. Not sure why that worked but it did.

Would you have any idea how to add the minor gridlines seen on the graph at the bottom of http://orbit-analytics.herokuapp.com/video/10? I'm sure it involves .tickSubdivide(true) but I'm failing to get it to work.I'm sure they're just using lines and text and carefully placing them.

boko
07-18-2012, 06:27 AM
I'm sure they're just using lines and text and carefully placing them.

No, it's something that can be automatically done using the D3.js library but I'm having trouble getting it to work like I did on the other page.

DrDOS
07-18-2012, 03:45 PM
No, it's something that can be automatically done using the D3.js library but I'm having trouble getting it to work like I did on the other page.So they're using the G3 library to generate the lines and the text. They can be put in 'by hand' as well, or you could write your own script and use their append function to add it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum