为什么我的点击事件需要在D3.js中点击两次才能触发？

Question

我在 svg foreignObject中有一个按钮，我已经通过D3将点击事件附加到foreignObject。触发click事件，但仅在第二次单击foreignObject时触发。首次点击时会发生什么，该按钮活动（蓝色边框）。因此，一旦它处于活动状态，只需点击一下即可触发事件。

我认为问题在于按钮附加到的组在某种程度上是在后台，但我不确定，因为只有一个<g>添加了问题。

我也尝试将click事件直接绑定到按钮。但这种行为没有改变。

这是我的代码（这是我需要的最小化代码）：JSFiddle

如何更改它，以便每次点击事件（首次点击）？

Answer 1

一种选择是不使用raise（）

而不是

function dragstarted(d) {
  d3.select(this).raise().classed("active", true);<--- seems like raise eating up the event.
}

使用此

function dragstarted(d) {
  d3.select(this).classed("active", true);
}

工作代码here