Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Center node of sunburst is hidden if the next level has only one child #37

Closed
beaugunderson opened this issue Aug 11, 2010 · 6 comments
Closed

Center node of sunburst is hidden if the next level has only one child #37

beaugunderson opened this issue Aug 11, 2010 · 6 comments

Comments

@beaugunderson
Copy link

Reproduction:

  • Create a Sunburst visualization
  • Create a top-level node, set its type to 'none'
  • Give it one child node

The top-level node will be obscured by the child node (instead of an empty 'hole'). As soon as you add another child node adjacent to the first the top-level node becomes visible again (there is a hole in the center of the sunburst).
@beaugunderson
Copy link
Author

Here's a simple reproduction; I linked to online versions of jquery and jit for ease of testing.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 <head> 
  <title>Testcase - Broken Sunburst</title> 

  <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 

  <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
  <script type="text/javascript" language="javascript" src="http://thejit.org/static/v20/Jit/jit.js"></script> 

  <style type="text/css"> 
   #infovis {
    width: 100%;
    background-color: #white;
    margin: auto;
    overflow: hidden;
    color: #ccc;
   }
  </style> 

  <script type="text/javascript" language="javascript"> 
   var burst, labelType, useGradients, nativeTextSupport, animate;

   $(function() {
    (function() {
     var ua = navigator.userAgent,
     iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
     typeOfCanvas = typeof HTMLCanvasElement,
     nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
     textSupport = nativeCanvasSupport 
     && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
     //I'm setting this based on the fact that ExCanvas provides text support for IE
     //and that as of today iPhone/iPad current text support is lame
     labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
     nativeTextSupport = labelType == 'Native';
     useGradients = nativeCanvasSupport;
     animate = !(iStuff || !nativeCanvasSupport);
    })();

    $(window).resize(function() {
     $('#infovis').height($(window).height());

     if (burst) {
      burst.refresh();
     }
    }); 

    $('#infovis').height($(window).height());

    burst = new $jit.Sunburst({  
     injectInto: 'infovis',
     Label: {
      type: 'Native'
     },
     Node: {
      overridable: true,
      type: useGradients ? 'gradient-multipie' : 'multipie'
     },  
    });

    var json = { 
     'children' : [
      {
       'id': 'child-1',
       'name': 'child-1'
      }
      // Uncomment these lines to see the correct behavior
      //,{
      // 'id': 'child-2',
      // 'name': 'child-2'
      //}
     ],
     'id': 'parent',
     'name': 'parent',
     'data': {
      '$type': 'none'
     }
    };

    burst.loadJSON(json);
    burst.refresh();
   });  
  </script> 
 </head> 
 <body> 
  <div id="infovis"></div>    
 </body> 
</html>

@philogb
Copy link
Owner

philogb commented Aug 16, 2010

Thanks a lot for reporting the issue. I'll fix this for the final version.

@philogb
Copy link
Owner

philogb commented Nov 16, 2010

Hi,

Thanks for providing the error. Could you provide an image with the error? I'm trying a similar dataset with just one child and everything is displayed as expected: http://i.imgur.com/DJX2E.png .

Also, what browser are you using?

Thanks,

@philogb
Copy link
Owner

philogb commented Nov 16, 2010

I tried this with FF4 beta, Opera, Safari and Chrome and everything seems to work fine. I'm closing the ticket, but please let me know if the error persists.

Thanks,

@beaugunderson
Copy link
Author

Still an issue; this is what I see in Chrome dev 9.0.576.0 (the latest dev channel release as of today):

http://i.imgur.com/L4gCf.jpg

This was using a git clone from 5 minutes ago. :)

The test code I used is the code above, you can test here if you'd like:

http://reginald.beaugunderson.com/sunburst-bug/

I tried in Firefox as well and it worked but the text at the center that says 'parent' is unreadable (aliasing issues).

@philogb
Copy link
Owner

philogb commented Nov 16, 2010

Hi, thanks for the response, the example you provided works well in chrome in mac, must be a windows issue. I'll investigate further.

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@beaugunderson @philogb