React v16- d3 v4，当使用鼠标从d3选择将得到，类型错误：无法读取null的属性'sourceEvent'？

Question

将 d3 与 React 一起使用并从 d3-select 导入鼠标

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

尝试在组件中使用：mouse(e.target) or mouse(select('.element'))时，出现此错误：

TypeError: Cannot read property 'sourceEvent' of null
./node_modules/d3-selection/src/sourceEvent.js.__webpack_exports__.a
node_modules/d3-selection/src/sourceEvent.js:5
  2 | 
  3 | export default function() {
  4 |   var current = event, source;
> 5 |   while (source = current.sourceEvent) current = source;
  6 |   return current;
  7 | }
  8 | 

使用 react-create-app 创建的项目似乎未访问源事件?...

Answer 1

经过一些研究后的最佳解决方案是，因为我没有使用 d3-events，我们应该通过调用传递事件来解决问题......

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

d3.mouse 不接受事件作为参数，但如果你阅读源代码，你可以找到另一个通过 mouse(( 调用的函数来返回值，它接受事件作为参数，这个函数称为 clientPoint((。

因此，不要使用 mouse((，而是使用 clientPoint((...

就我而言，这奏效了：

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

和：

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

在这种情况下，我将元素和事件都传递给了clientPoint(在代码中称为点，但导出为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...