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

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>