反应v16-d3 v4,当使用鼠标从d3选择时将获取,TypeError:无法读取null的属性“sourceEvent”?

经过一些研究后,最好的解决方案是这样的,因为我没有使用d3事件,我们应该通过调用来传递事件来解决问题。。。

var mouse = function(node) {
  var event = sourceEvent();
  if (event.changedTouches) event = event.changedTouches[0];
  return point(node, event);
};

d3.鼠标 不接受事件作为参数,但如果阅读源代码,可以找到另一个通过 鼠标() ,以返回值并接受事件作为参数,此函数调用 客户端点() .

所以不用 鼠标() 使用 客户端点() ...

在我的情况下,这起到了作用:

import { selectAll, select, clientPoint } from 'd3-selection';

以及:

myFunction(e){
  console.log(clientPoint(e.target, e));
}

在本例中,我将元素和事件都传递为clientPoint(在代码中称为point,但导出为clientPoint)将接受(节点,事件),如您在源代码中看到的:

var point = function(node, event) {
  var svg = node.ownerSVGElement || node;

  if (svg.createSVGPoint) {
    var point = svg.createSVGPoint();
    point.x = event.clientX, point.y = event.clientY;
    point = point.matrixTransform(node.getScreenCTM().inverse());
    return [point.x, point.y];
  }

  var rect = node.getBoundingClientRect();
  return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
};

希望这对其他使用React v16和D3 v4的用户有所帮助。。。