React v16-d3 v4，当使用来自d3-selection的鼠标时会得到，TypeError：无法读取属性'sourceEvent'的null？

Posted 2021-05-03

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

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创建的项目，似乎没有访问源事件？...

答案

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

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（在代码中称为point，但导出为clientPoint）将接受（node，event），如源代码中所示：

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 ......