【d3.js】如何在某event中计算鼠标位置与svg画布边缘的距离?

理由
举报 取消

近期在研究d3.js,非常好奇,放大缩小zoom是如何实现的。没看源码,想先自己看看能不能实现。遇到的问题是svg标签中transform的属性,原始参照点永远是左上角,所以放大缩小操作的时候,位置就会有偏差,现在想让位置仍然保持鼠标在原图的相对位置。所以我的想法就是当鼠标在图形上滚动滑轮时算出鼠标位置距离画布边缘的距离,然后让<g >包裹的整体图形transform(-(scale*x0-x0),-(scale*y0-y0))移动一下就好了。关键是如何实现?抽出一个公共的方法用于计算鼠标距离svg画布的距离的api。

2017年10月29日 2 条回复 1187 次浏览

发起人:叶世清 初入职场

curiosity and love!

回复 ( 2 )

  1. Twiknight
    理由
    举报 取消

    你的思路不能说是错的,但是……至少是偏门的。

    如果我来做,我会参考W3C对transform matrix函数的定义,调整一套适合的参数。

  2. 官文祥
    理由
    举报 取消
        d3.select('#svgID')
        .on('eventName', function(){
             d3.mouse(this) //Here is
        })
    

我来回答

Captcha 点击图片更换验证码