触发 SVG 元素上的单击事件

Triggering a Click Event on an SVG element

本文关键字：单击 事件 SVG 元素 触发      更新时间：2023-09-26

我有一组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 相当陌生，并且仍在弄清楚它的本机方法，所以我只是想知道是否有人有类似的任务。多谢！

我建议您使用节点索引为每个节点创建唯一 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);
)};

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

相关文章：