触发SVG元素上的Click事件

我有一组svg节点，它们附加了一个click事件监听器。 我还分配了一个nodeId来唯一地标识我的不同节点

 var nodeId = 0; nodeGroup.append("svg:circle") .attr("r", 7) .style("fill", "blue") .style("stroke", "orange") .attr("data-node-id", function(d,i) { return nodeId += 1; }) .on('click', nodeInfo); 

单击时，节点将触发一个显示节点对象的函数

 var nodeInfo = function displayNodeInfo(node){ console.log(node); } 

我想要做的是点击一个与svg组分开的按钮来调用这个displayNodeInfo()函数。 该函数应显示上一个或下一个节点，具体取决于所点击的内容。 我认为nodeId会在这里派上用场。

   $("#next-node").on("click", function(e){ displayNodeInfo() //Not sure how to pass the next node here )}; 

我对D3很新，并且仍在弄清楚它的原生方法，所以我只是想知道是否有人有类似的任务。 非常感谢！

Answer 1

我建议你使用节点索引为每个节点创建唯一的id，并使用相同的节点识别。 应跟踪当前所选节点的索引。

 var activeNodeIndex = 0; nodeGroup.append("svg:circle") .attr("r", 7) .style("fill", "blue") .style("stroke", "orange") .attr("id", function(d,i) { return "node"+i; //i has value from 0 to (No. of nodes - 1) }) .on('click', function(node,i){ activeNodeIndex = i; //Track present selected node. displayNodeInfo(node); }); function displayNodeInfo(node){ console.log(node); } $("#next-node").on("click", function(e){ var nextNode = d3.select("#node"+(activeNodeIndex +1)); //find next node using index displayNodeInfo(nextNode); )}; $("#prev-node").on("click", function(e){ var prevNode = d3.select("#node"+(activeNodeIndex-1)); //find previous node using index displayNodeInfo(prevNode); )}; 

注意：根据当前节点选择（第1个或最后一个）启用/禁用下一个/上一个按钮。