How can I make double click event on node in d3.js?

Question

I want to make double click event on nodes. So I tried

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

and

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

But all failed. Can anyone help me?

Full codes are below.

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

Finally, I used a below method. (dblclick also works)

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

This code may have an error `{return http://google.com");}`, right ? — DontVoteMeDown, Nov 17 '13 at 13:36

score 84 · Accepted Answer · edited May 05 '17 at 13:24

84

You can use "dblclick" instead of "dbclick":

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

edited May 05 '17 at 13:24

Isaac Lyman

2,175
1
22
42

answered Nov 18 '13 at 00:20

toshi

2,757
1
16
12

score 3 · Answer 2 · answered Aug 05 '19 at 15:16

3

If using D3 Observable:

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

answered Aug 05 '19 at 15:16

Cybernetic

12,628
16
93
132

How can I make double click event on node in d3.js?

2 Answers2

Linked