如何在d3.js中的节点上进行双击事件?

时间:2013-11-17 13:33:43

标签: svg d3.js

我想在节点上进行双击事件。 所以我试过

.on("dbclick",function(d){return "http://google.com");});

.bind({"dbclick",function(d){alert("hello")} });

但都失败了。任何人都可以帮助我吗?

完整代码如下。

var node = svg.selectAll(".node")
    .data(graph.nodes)
    .enter().append("g")
    .attr("class", "node")
    //.on("dbclick",function(d){return "http://google.com");});
    //.attr("xlink:href", function(d){return d.url;}
    .call(force.drag);
    //.bind({"dbclick",function(d){alert("hello")} });

最后,我使用了以下方法。 (dblclick也有效)

var node = svg.selectAll(".node") .data(graph.nodes) .enter().append("a") 
              .attr("class", "node") .attr("target", "_blank")
              .attr("xlink:href", function(d){return "google.com";;}) 

2 个答案:

答案 0 :(得分:62)

您可以使用" dblclick"而不是" dbclick":

nodes.on("dblclick",function(d){ alert("node was double clicked"); });

答案 1 :(得分:0)

如果使用 D3可观察

const nodeEnter = node.enter().append("g")
        .on("dblclick", d => {
          d3.event.preventDefault();
          // do your thing
        });