Question

我想在我的页面上运行Mike Bostock的Zoomable Circle Paking example，但我遇到了问题。

我已将代码包含在一个闭包中，因为我在一个页面上有多个可视化。像这样：

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

可视化加载正常，但是当我点击任何圆圈或区域时，我收到以下错误：“（index）：2444 Uncaught TypeError：无法读取未定义的属性'parent'”< / p>

似乎指向这条线：

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

...

无法理解未找到父节点的原因。

Answer 1

找到修复需要在javascript闭包中使用circle packing viz的情况。出现问题的原因是父级有时可能为空值，因为viz没有附加到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";
          }
        });

这应该没有任何问题。

Zoomable Circle包装 - 父未定义

1 个答案: