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

时间:2018-03-20 06:39:19

标签: javascript d3.js dagre-d3

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

我的问题是我添加节点后点击事件没有被解雇:

//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事件并且节点会改变颜色,但它本身并不在浏览器中工作。

根据我的理解,我应该在加载图表后运行我的点击事件,但我该怎么做呢?我希望能够在添加节点后随时触发我的点击事件,以便稍后可以添加更多操作。

工作演示:here

如果您使用演示:

  1. 我从"选择操作"中选择的操作;下降得到 当我将上一个和下一个操作保持为" NONE"。

  2. 时添加
  3. 添加第一个节点后,添加其他节点,同时提及上一个节点并保留下一个节点 节点为“无”'

  4. 如果我想在中间添加一个节点,我提到前两个节点 节点和下一个节点(如果存在)。

1 个答案:

答案 0 :(得分:0)

答案非常简单,我从this answer here得到了这个想法 我只需将这段代码粘贴到我的 draw 函数中,其中所有内容都在渲染,以便再次绑定。