区分D3版本4中的单击和双击

Question

我看到http://bl.ocks.org/couchand/6394506适用于d3版本3，但我发现版本4中不再支持d3.rebind。有人可以帮忙，因为我需要这个功能吗？

Answer 1

作为CHANGELOG状态，rebind可以通过实现一个简单的包装函数来替换。

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>

这只是原始重新绑定方法的source。