停止d3圆包装标签重叠

stop d3 circle pack labels from overlapping

本文关键字：标签 重叠 包装 d3 停止      更新时间：2023-09-26

标签重叠。示例:JSFIDDLE

  1. 点击文字标签"A组"。缩放过渡后，A组标签仍然存在，导致与小圆圈的标签重叠。
  2. 点击其他地方缩小。
  3. 再次点击"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"; });

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

这篇文章很接近，说可以使用包输出来限制可见性，但没有说如何实现它。

所以基本上我试着这样做:"如果缩放到中等或小圆圈的水平，不要显示中等圆圈标签。"

谢谢。

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