javascript - 停止 d3 圆包标签重叠

Question

卡在重叠的标签上。为了说明:JSFIDDLE

1. 点击文本标签“Group A”。缩放过渡后，A 组标签仍然与小圆圈的标签重叠。
2. 点击其他地方缩小。
3. 再次点击“A 组”。这次标签没有保留，所以没有重叠。所以它似乎在一次后自行修复。

我不想在第一次点击时不重叠。我该怎么做呢？我不想 chop 标签或重新定位标签。

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

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 ，通过说可以使用包输出来限制可见性，但没有说明如何实现它。

所以基本上我正在尝试做这样的事情:“如果缩放到中圆或小圆的级别，请不要显示中圆标签。”

谢谢。

Answer 1

我也遇到了同样的问题。我已经发现，如果在生成初始 View 后立即在根上应用缩放功能的特定部分，则可以解决此问题。将此代码添加到 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";
    });
}