Triggering A Click Event On An Svg Element

I have a group of svg nodes that have a click event listener attached to them. I also assign a nodeId to uniquely identify my different nodes var nodeId = 0; nodeGroup.append('svg:

Solution 1:

I would suggest you to use node index for creating unique id for each node and use the the same for node identification. Should track the index of the present selected node.

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);
    });

functiondisplayNodeInfo(node){
    console.log(node);
}

$("#next-node").on("click", function(e){
   var nextNode  = d3.select("#node"+(activeNodeIndex +1)); //find next node using indexdisplayNodeInfo(nextNode);
)};

$("#prev-node").on("click", function(e){    
    var prevNode  = d3.select("#node"+(activeNodeIndex-1));  //find previous node using indexdisplayNodeInfo(prevNode);
)};

Note: Enable/disable Next/Prev buttons based on the current node selection(1st OR last).