停止 d3 圆包标签重叠

Question

卡在重叠的标签上。举例说明：JSFIDDLE

单击文本标签 "Group A"。缩放过渡后， A 组标签仍然导致与小圆圈标签重叠。
单击其他地方可缩小。
再次单击 "Group A"。这次标签没有保留，所以没有重叠。所以它似乎在一次后自行修复。

我不希望第一次点击时出现重叠。我该怎么做呢？我不想截断标签或重新定位标签。

我一直在摆弄这一点，但到目前为止没有运气。

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

仅供参考，如果第一次点击是在中等圆圈上，也会发生这种情况。

This post gets close，说可以使用包输出来限制可见性，但没有说明如何实现。

所以基本上我正在尝试做这样的事情："If zoomed to the level of medium or small circle, don't show medium circle label."

谢谢。

Answer 1

我遇到了同样的问题。我已经发现，如果在生成初始视图后立即在根上应用缩放功能的特定部分，则可以解决此问题。将此代码添加到 d3.json 文件的末尾应该可以解决问题。仍在研究更好的解决方案。

init(root)
function init(d) {
  var transition = d3.transition()
  transition.selectAll("text")
    .each("start", function(d) {
      if (d.parent === focus) this.style.display = "inline";
    });
}

停止 d3 圆包标签重叠

stop d3 circle pack labels from overlapping

javascript

d3.js

label

zooming

circle-pack