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

beaugunderson commented 14 years ago

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 commented 14 years ago

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 commented 14 years ago

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

philogb commented 14 years ago

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 commented 14 years ago

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 commented 14 years ago

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 commented 14 years ago

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

philogb / jit

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