Javascript 触发SVG元素上的单击事件

我有一组svg节点，它们连接了一个

点击
事件监听器。我还分配了一个
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
会在这里派上用场

<button id="next-node" />
<button id="previous-node" />

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


$（“#下一个节点”）。在（“单击”上，函数（e）{
displayNodeInfo（）//不确定如何在此处传递下一个节点
)};

我对D3还相当陌生，仍然在研究它的原生方法，所以我只是想知道是否有人有过类似的任务。多谢
 我建议您使用节点索引为每个节点创建唯一的id，并使用相同的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);
)};

注意：根据当前节点选择（第一个或最后一个）启用/禁用下一个/上一个按钮。
以及什么是
nodeGroup
？@Anthony只是一组
svg:g
elements@KuraiBankususvg:circles是数据驱动的吗？是的，它们是@seemantkulletenth这就是我想要的，很好地利用了索引。非常感谢你！