Zoomable Circle Packing - Eltern undefined

Question

Ich versuche, Mike Bostock Zoomable Circle Paking example auf meiner Seite laufen, aber ich habe Probleme.

Ich habe den Code in eine Schließung eingeschlossen, wie ich mehrere Visualisierungen auf einer einzigen Seite habe. Wie so:

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

Die Visualisierung Lasten in Ordnung, aber wenn ich auf jedem Kreis oder Bereich klicken, bekomme ich folgende Fehlermeldung: "(Index): 2444 Uncaught Typeerror: kann nicht lesen Eigenschaft‚Eltern‘undefinierter "

scheint auf die Linie zeigen werden:

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

...

Nicht in der Lage zu verstehen, warum der übergeordnete Knoten nicht gefunden werden.

Answer 1

Sie haben eine Lösung gefunden, wenn Sie innerhalb eines Javascript-Verschlusses eine Kreisverpackung verwenden müssen. Das Problem tritt auf, weil das Elternelement manchmal Nullwerte sein kann, da die Viz nicht an den # Körper der HTML-Seite angehängt ist.

Sie müssen also für den Fall, in dem Textteil übersetzen zu handhaben:

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"; }); 

Stattdessen Sie für die Null verarbeiten kann Werte Fall:

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"; 
      } 
     }); 

Dies ohne Probleme funktionieren sollte.