为什么我动态添加的 D3 节点上的点击事件没有触发？

Question

我的代码通过用户动态添加一个节点来创建力导向图。

我的问题是在添加节点后我的点击事件没有被触发：

//change the node's colour to blue when clicked
d3.select("svg").selectAll("g.node").on("click", function(OperationName) {
  debugger;
  OperationArray = JSON.parse(localStorage['dynamicNode']);
  var rect = this.firstChild;
  changeColour(rect);
  document.getElementById('selectedOperation').value = OperationName;
  document.getElementById('previousOperation').value = OperationArray[OperationName].inputQueue
  document.getElementById('nextOperation').value = nextOperation;
});

如果我在添加节点后尝试运行在控制台中使用这段代码，则会触发点击事件并且节点会更改颜色，但它本身在浏览器中不起作用。

据我所知，我应该在加载图表后运行我的点击事件，但我该怎么做呢？我希望能够在添加节点后随时触发我的点击事件，以便稍后向其添加更多操作。

工作演示：here

如果您使用演示：

我从 "Select an Operation" 下拉列表中 select 得到的操作当我将上一个和下一个操作保留为 "NONE".
添加第一个节点后，我添加其他节点，同时提及前一个节点并保留下一个节点节点为 'NONE'.
如果我想在中间添加一个节点，我会提到前面两个节点和下一个节点（如果存在）。

Answer 1

答案很简单，我的想法来自 this answer here 我只需要将那段代码粘贴到我的 draw 函数中，在那里一切都在渲染，以便它再次绑定。

为什么我动态添加的 D3 节点上的点击事件没有触发？

Why is my click event on my dynamically added D3 node not firing?

javascript

d3.js

dagre-d3