CODEWITHSUNDEEP
d3.js
David Carrick Sutherland
David Carrick Sutherland

Reputation: 145

Distinguishing click and double-click in D3 Version 4

I have seen http://bl.ocks.org/couchand/6394506 which applies to d3 Version 3, but I have discovered that d3.rebind is no longer supported in Version 4. Can someone please help as I need this functionality?

Upvotes: 1

Views: 1445

Answers (1)

Andrew
Andrew

Reputation: 13853

As the CHANGELOG states, rebind can be replaced by implementing a simple wrapper function.

cc.on = function() {
 var value = event.on.apply(event, arguments);
 return value === event ? cc : value;
};
return cc;


function clickcancel() {
  var event = d3.dispatch('click', 'dblclick');

  function cc(selection) {
    var down,
      tolerance = 5,
      last,
      wait = null;
    // euclidean distance
    function dist(a, b) {
      return Math.sqrt(Math.pow(a[0] - b[0], 2), Math.pow(a[1] - b[1], 2));
    }
    selection.on('mousedown', function() {
      down = d3.mouse(document.body);
      last = +new Date();
    });
    selection.on('mouseup', function() {
      if (dist(down, d3.mouse(document.body)) > tolerance) {
        return;
      } else {
        if (wait) {
          window.clearTimeout(wait);
          wait = null;
          event.call('dblclick', d3.event);
        } else {
          wait = window.setTimeout((function(e) {
            return function() {
              event.call('click', e);
              wait = null;
            };
          })(d3.event), 300);
        }
      }
    });
  };
  cc.on = function() {
    var value = event.on.apply(event, arguments);
    return value === event ? cc : value;
  };
  return cc;
}
var cc = clickcancel();
d3.select('#map').call(cc);
cc.on('click', function() {
  d3.select('#map').text(d3.select('#map').text() + 'click, ');
});
cc.on('dblclick', function() {
  d3.select('#map').text(d3.select('#map').text() + 'dblclick, ');
});
 #map {
   width: 960px;
   height: 500px;
   background: cyan;
 }
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id='map'></div>

This is simply the source from the original rebind method.

Upvotes: 2

Related Questions