代码之家 › 专栏 › 技术社区 › Alireza

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

dom-events event-handling d3.js reactjs javascript

Alireza · 技术社区 · 7 年前

使用 d3级 具有反应和从d3选择导入鼠标

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 |

使用创建的项目 反应创建应用程序 ,似乎未访问源事件?。。。

1 回复 | 直到 5 年前

Alireza 7 年前

经过一些研究后,最好的解决方案是这样的,因为我没有使用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];
};