时间戳

首页 > 解决方案 > 如何将 d3.event 作为子模块导入反应应用程序以使用 d3.event.pageX

javascript - 如何将 d3.event 作为子模块导入反应应用程序以使用 d3.event.pageX

问题描述

我们的 React 应用大量使用 d3，我们曾经使用import * as d3 from 'd3'. 为了使我们的包更小，我们将这些替换为子模块导入，例如import { select } from 'd3-selection'. 但是，我们正在努力导入d3.event以使用d3.event.pageX：

这是我们的代码片段：

.on('mouseover', function (d) {
    // console.log('d: ', d);
    // Tooltip Display + Position + Colors
    tipDiv.transition().duration(0).style('opacity', 1);
    tipDiv.html(tipHtml(d, tooltipName))
        .style('left', (d3.event.pageX - 10) + 'px')
        .style('top', (d3.event.pageY + 35) + 'px');
    tipDiv
        .style('background', colorScale(d.netFgPct7Hex))
        .style('color', whiteBlack(colorScale(d.netFgPct7Hex), 'rgb'));

这会引发TypeError: Cannot read property 'pageX' of undefined有意义的错误，因为通过删除import * as d3 from 'd3'，我们不再导入 d3.event。似乎没有单独的d3-event模块，并且 using:import { event} from 'd3-selection'也不起作用，返回Attempted import error: 'event' is not exported from 'd3-selection'.

那么什么子模块/我们如何导入和使用 d3.event 呢？

编辑：我正在研究 d3.pointer，也许这个帖子不需要 d3.event.pageX

标签： javascriptd3.jsecmascript-6es6-modules

解决方案

推荐阅读