Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2005
    Posts
    30
    Thanks
    0
    Thanked 1 Time in 1 Post

    SVG Graph Generated Using D3.js disappearing when scrolling in Safari

    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.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    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.

  • #3
    New Coder
    Join Date
    Oct 2005
    Posts
    30
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    Quote Originally Posted by boko View Post
    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.

  • #5
    New Coder
    Join Date
    Oct 2005
    Posts
    30
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by DrDOS View Post
    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.

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    Quote Originally Posted by boko View Post
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •