m站

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

D3.js – Data-Driven Documents 这个框架发布于2011年。从当时的眼光来看，利用Data Join（Thinking with Joins）来完成『DOM结点』与『数据』之间的更新好像还是挺先进的。另外，可以直接操作SVG DOM对象也是 D3 与其他『高级』Visualization框架（例如highchart，protovis）不同的卖点之一。将近4年过去了，前端技术有了些变化，MVVM、Web Component、Virtual DOM似乎是目前的趋势。我不太了解d3.js的实现机制，但感觉它的Data Join与Virtual DOM（React）似乎有点像（利用局部更新来优化性能）。 […]