我要评论近期由于代码内关于d3版本的更新，由原来的v3 v4更新值v7.0.0
导致原有关于d3的波点图内zoom方法的拖拽缩放、tooltip提示框问题开始报错，即d3.event数据废弃了
1.设置d3图形的缩放配置
在d3.event.transform.x中，即提示
uncaught (in promise) typeerror: cannot read properties of undefined (reading 'x')
此时可在zoom方法内，使用匿名函数获取当前参数current
参数内即含有所需的x，y，k值
let zoom = d3.zoom().scaleextent([0, 8]).on('zoom', function (current){
zoomed(current.transform)
})
....
let svg = d3
...
.call(zoom)
function zoomed(transform) {
svg.style('transition', 'none')
svg.attr('transform', `translate(${transform.x},${transform.y}) scale(${transform.k})`
)}
2.d3图形的鼠标tooltip配置事件
let node = svg
...
.on('mouseover', function (current) {
cleartimeout(that.timer)
that.timer = settimeout(() => {
that.drawtooltip(current.target.__data__, current)
}, 100)
})
.on('mouseout', function (current) {
cleartimeout(that.timer)
that.tooltip.style('visibility', 'hidden')
})
此时关于图例内的数据
需要通过current.target.__data__来获取
- 而layerx则直接在匿名函数内的current参数获取
- 而非d3.event获取
drawtooltip(data, event) {
this.tooltip
.style('visibility', 'visible')
.style('left', `${event.layerx}px`)
.style('top', `${event.layery}px`)
.text(`名称：${data.title}`)
.append('p')
.text(`类别：${data.type}`)
.append('p')
.text(`数量：${data.value}`)
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论