CODEWITHSUNDEEP
javascriptd3.js
Pixelord
Pixelord

Reputation: 641

How can I detect double click on brush object?

I am trying add double click event on d3 brush object. But I am not quite sure how can I do that.

I tried to add .on("dblclick", functionName) in the brush object like this:

MyGroup.append("g")
             .attr("class", "viewWindow")
             .call(viewPort)
             .selectAll("rect")
             .style("fill", "#fff3b7")
             .style("fill-opacity", 0.5)
             .attr("height", miniHeight)
             .attr("id", "viewWindow")
             .on("dblclick", brushExpand);

However, its not working. The double click event is not triggering. How can I add a doubleclik event in a brush object?

Thanks.

Upvotes: 2

Views: 701

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

Instead of attaching doubleclick like this on #viewWindow:

.attr("id", "viewWindow")
.on("dblclick", function() { 
     d3.select("#viewWindow").attr("fill", "red")
 });

Seems like the doubleclick does not work, I believe d3 is overriding the double click (That is reason why we are not getting event). So I am using another approach to capture double click.

//declare variable
var click = false;
d3.selectAll("#viewWindow").on("mousedown", function() {
  if(click){//if true then double click
    console.log("double click");
    //do what you want to do in double click
    d3.selectAll("#viewWindow").attr("fill", "red");
    //set flag to false
    click=false;
  } else {
    //timeout to reset the flag after 500 milliseconds of 1st mouse down.
    setTimeout(function(){click=false;}, 500);
  }
  click = !click;
})

Working fiddle here

Hope this helps!

Upvotes: 2

Related Questions