Distinguishing click and double-click in D3 Version 4 - d3.js

Question

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?

Answer 1

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.