为什么在动态添加的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;
});

如果我在添加节点后尝试在控制台中运行这段代码，则会触发click事件，并且该节点会更改颜色，但它本身无法在浏览器中正常工作。

据我了解，我应该在加载图表后运行我的click事件，但是如何在这里执行呢？ 我希望能够在添加节点后随时触发我的click事件，以便以后可以向其添加更多操作。

工作演示： 这里

如果您使用演示：

1. 当我将上一个和下一个操作保持为“ NONE”时，将从“选择操作”下拉列表中选择的操作被添加。

2. 一旦添加了第一个节点，就添加了其他节点，同时提到了上一个节点，并将下一个节点保持为“ NONE”。

3. 如果要在中间添加一个节点，请同时提及上一个节点和下一个节点（如果存在）。

Answer 1

答案非常简单，我从这里得到的想法是，我只需要将这段代码粘贴到我的draw函数中即可绘制所有内容，以便再次绑定它。