Запуск события Click на элементе SVG

Question

У меня есть группа узлов 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); 

По щелчку, узел запускает функцию для отображения объекта Node

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

То, что я пытаюсь сделать, это вызвать эту displayNodeInfo() функцию нажмите кнопку отдельно от группы svg. Функция должна отображать либо предыдущий, либо следующий узел в зависимости от того, что было нажато. Я считаю, что 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 
)}; 

Я довольно новый для D3 и до сих пор выяснить свои собственные методы, так что я просто интересно, если кто имел подобную задачу. Большое спасибо!

Answer 1

Я бы предложил вам использовать индекс узла для создания уникального идентификатора для каждого узла и использовать его для идентификации узла. Должен отслеживать индекс текущего выбранного узла.

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

Примечание: Включение/отключение кнопки Далее/Prev на основе текущего выбора узла (1-й или последний).