上一篇
下一篇
用svg+d3.js制作位置示意图-鼠标滚轮放大缩小/拖动/弹窗/点标识/全屏切换
作者:admin 日期:2016-08-24
按到朋友的一个项目，制作黄花机场的位置示意图，原来是几年前用Flash制作的。到现在就存在一些问题了，比如说代码不透明，不好进行编辑等。于是我直接用H5+Jquery+d3.js进行了一下重构。
制作过程有点小曲折。问题的核心当然是这个放大缩小拖动的程序。我用百度在国内范围找了半天，都没有很合适的。找到的几个都功能点小缺陷。不得已动用翻墙工具，用google搜索了一下，找到了一个：https://bl.ocks.org/mbostock/6123708
此程序核心用的是svg模型，用的是著名的d3.js框架。本来我想用纯DOM结构解决问题，可是实在没找到更好的，加上之前对SVG又有点研究，于是决定使用这个。找这个东西就花了几小时。
之后总体没碰到大的问题。对SVG的结构又有了更深的理解。
另外，对于d3 zoom的初始值的设定，默认情况老是从1开始，但是要求是从我设定的值开始。花了2小时用google查资料，最后发现了：
Javascript代码
- zoom.scale(ratio_init);
- zoom.event(_svg.transition().duration(200));
搞定了这个问题。
此次的最大收获就是:
国外好东西真多，google+英文关键词搜索才是王道。
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 0 | 引用: 0 | 查看次数: 34073
发表评论
