CODEWITHSUNDEEP
javascriptd3.js
srinivas
srinivas

Reputation: 5108

Zoomable Circle packing - parent undefined

I am trying to just run Mike Bostock's Zoomable Circle Paking example on my page, but I am running into problems.

I have enclosed the code in a closure, as I have multiple visualisations on a single page. Like so:

<script>
(function(){
  //zoomable circle packing code here ...
})(window,d3);
</script>

The visualization loads fine, but when I click on any circle or area, I get the following error: " (index):2444 Uncaught TypeError: Cannot read property 'parent' of undefined"

Seems to be pointing to the line :

transition.selectAll("text")
 .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })

...

Not able to understand why the parent node is not being found.

Upvotes: 0

Views: 128

Answers (1)

srinivas
srinivas

Reputation: 5108

Found a fix to situations when you need to use circle packing viz inside a javascript closure. The problem happens because the parent can sometimes be null values as the viz is not appeneded to the #body of the html page.

So you need to handle for the case inside the text translate part:

transition.selectAll("text")
  .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
    .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
    .each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
    .each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });

Instead you can handle for the null values case:

transition.selectAll("text")
      .filter(function(d) {
          if(!(d === undefined))
          {
            return d.parent === focus || this.style.display === "inline";
          }
        })
        .style("fill-opacity", function(d) {
          if(!(d === undefined))
          {
            return d.parent === focus ? 1 : 0;
          }
         })
        .each("start", function(d) {
          if(!(d === undefined))
          {
            if (d.parent === focus) this.style.display = "inline";
          }
        })
        .each("end", function(d) {
          if(!(d === undefined))
          {
            if (d.parent !== focus) this.style.display = "none";
          }
        });

This should work without any problems.

Upvotes: 1

Related Questions