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

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

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