如何手动触发D3图表指定元素上已绑定的click点击事件？

问题原因 #

你使用的d3.select("#myCircle0").click()写法在D3 v6及更高版本中已经失效，该版本移除了selection系列快捷触发事件的内置方法。

可用解决方案 #

方案1：使用D3内置的dispatch方法（最推荐） #

直接调用D3选择集的dispatch方法触发指定事件，会自动适配D3绑定的事件处理逻辑，传参也符合事件 handler 的要求：

d3.select("#myCircle0").dispatch("click");

如果需要传递自定义事件参数，可以按如下写法：

d3.select("#myCircle0").dispatch("click", {detail: {customParam: "自定义参数"}});

方案2：使用原生DOM事件派发 #

先从D3选择集里拿到原生DOM节点，手动创建点击事件并派发：

const circleNode = d3.select("#myCircle0").node();
const clickEvent = new MouseEvent("click", {
  bubbles: true,
  cancelable: true,
  view: window
});
circleNode.dispatchEvent(clickEvent);

方案3：抽离公共事件逻辑（适合频繁调用的场景） #

你可以把点击事件的处理逻辑单独封装成公共函数，绑定事件和外部调用都复用这个函数，避免依赖事件触发机制：

// 抽离公共处理逻辑
function handleCircleClick(event, d) {
  d3.select(this).attr('stroke', 'black')
  d3.select(this).attr('stroke-width', '2px')
}

// 绑定时使用
myCircles.append('circle')
  // 其余属性配置省略
  .on('click', handleCircleClick)

// 外部直接调用
const target = d3.select("#myCircle0")
handleCircleClick.call(target.node(), new Event('click'), target.datum())

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