Zoomable Circle packing - parent undefined

Question

我想在我的頁面上運行Mike Bostock的Zoomable Circle Paking example，但我遇到了問題。

我把代碼放在了一個閉包中，因爲我在一個頁面上有多個可視化。像這樣：

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

可視化加載罰款，但是當我點擊任何一個圓或區域，我得到以下錯誤：「（指數）：2444遺漏的類型錯誤：無法讀取的不確定財產‘父’ 「

似乎是指向行：

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

...

無法理解爲什麼父節點未被發現。

Answer 1

找到了一種解決方案，當你需要在javascript關閉中使用圓圈打包時。發生這個問題的原因是，父母有時可能爲空值，因爲該父親並不會附屬於html頁面的#body。

所以，你需要處理的文本內的情況下翻譯部分：

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

相反，你可以處理爲空值的情況下：

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

這應該沒有任何問題的工作。