将 d3 js 代码从 v5.16 重构到 v6.6.2,d3.event 重大更改

Posted

技术标签:

【中文标题】将 d3 js 代码从 v5.16 重构到 v6.6.2,d3.event 重大更改【英文标题】:refactoring d3 js code from v5.16 to v6.6.2, d3.event breaking change 【发布时间】:2022-01-23 19:40:13 【问题描述】:

d3 新手并修复错误。我正在使用 d3 库处理 js 文件。以下代码行在 v5.16 中不会出错:

    function br(d) 
        let s = d3.event.selection || xScaleSelector.range()
        let extent = s.map(xScaleSelector.invert, xScaleSelector);
        let window = data.filter(d => d.date >= extent[0] && d.date <= extent[1])
        update(window)
    

但是,当迁移到 v6.6.2 及更高版本时,我收到错误消息。我得到的错误在线:let s = d3.event.selection || xScaleSelector.range() 并出现以下错误:Uncaught TypeError: Cannot read properties of undefined (reading 'selection')

错误的根源,根据https://github.com/d3/d3/releases/tag/v6.0.0,v6.0.0已经去掉了d3.event。 (d3.event 在 v6 中未定义)。有人可以建议我在迁移到 >= v6 时可以进行哪些更改来修复此错误吗?

【问题讨论】:

【参考方案1】:

请尝试:

function br(d) 
    let s = d.selection || xScaleSelector.range()
    let extent = s.map(xScaleSelector.invert, xScaleSelector);
    let window = data.filter(d => d.date >= extent[0] && d.date <= extent[1])
    update(window)

根据迁移指南here

【讨论】:

以上是关于将 d3 js 代码从 v5.16 重构到 v6.6.2,d3.event 重大更改的主要内容,如果未能解决你的问题,请参考以下文章

了解 D3.js 如何将数据绑定到节点

d3js多线散点图缩放

d3.js 地理世界地图 - 合并俄罗斯(将一小部分从美国旁边的左边移到右边)

GetJSON 从 URL 到 d3.js 图表

多折线图 d3 v6 的 SVG 图例

将 Next.js 升级到 v6.0.3 后 Storybook 无法编译