javascript - 在 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);

点击时，节点会触发一个函数来显示节点对象

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

我是 D3 的新手，仍在弄清楚它的 native 方法，所以我想知道是否有人有过类似的任务。非常感谢!

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

注意:根据当前节点选择(第一个或最后一个)启用/禁用下一个/上一个按钮。