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很新，并且仍在弄清楚它的原生方法，所以我只是想知道是否有人有类似的任务。非常感谢！

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

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

触发SVG元素上的Click事件

1 个答案: