执行d3.selectAll('circle').remove()后Tooltipster无法正常工作如何解决

• Tooltipster 仅会对 初始化执行时已经存在于DOM中的元素 绑定交互事件、生成实例，你后续用D3动态新增的圆形元素是在页面初始初始化完成后才插入的，没有经过Tooltipster的初始化处理，因此点击无法触发提示框。
• 你当前使用的固定250ms延迟的方案可靠性极低：如果D3渲染新圆形的耗时超过250ms，执行重新初始化时新圆形还没有插入DOM，依旧无法绑定成功。

首先把重复的Tooltipster初始化逻辑抽成公共函数，避免冗余代码：

function initTooltipster() {
  $('.tooltip').tooltipster({
    theme: 'tooltipster-punk',
    maxWidth: 270,
    contentAsHTML: true,
    trigger: 'custom',
    triggerOpen: {
      click: true,
      tap: true,
      mouseenter: false
    },
    triggerClose: {
      click: true,
      scroll: false,
      tap: true,
      mouseleave: false
    }
  });
}

然后调整交互逻辑，在D3完成新圆形的渲染后，立刻调用初始化函数，不要使用固定延迟：

$(document).ready(function() {
  // 页面首次加载时初始化现有圆形
  initTooltipster();

  $("#legend-button").click(function() {
    // 销毁旧元素的Tooltipster实例
    $('.tooltipstered').tooltipster("destroy");
    // 执行原有逻辑：移除旧圆形、过滤数组、生成新圆形
    d3.selectAll("circle").remove();
    // 【此处插入你遍历过滤后的数组、生成新circle的原有逻辑】
    // ...
    // 新圆形全部插入DOM后，立刻执行初始化
    initTooltipster();
  });
});

内容的提问来源于stack exchange，提问作者stuckonhtml