预览模式: 普通 | 列表

 按到朋友的一个项目,制作黄花机场的位置示意图,原来是几年前用Flash制作的。到现在就存在一些问题了,比如说代码不透明,不好进行编辑等。于是我直接用H5+Jquery+d3.js进行了一下重构。

 
制作过程有点小曲折。问题的核心当然是这个放大缩小拖动的程序。我用百度在国内范围找了半天,都没有很合适的。找到的几个都功能点小缺陷。不得已动用翻墙工具,用google搜索了一下,找到了一个:https://bl.ocks.org/mbostock/6123708
此程序核心用的是svg模型,用的是著名的d3.js框架。本来我想用纯DOM结构解决问题,可是实在没找到更好的,加上之前对SVG又有点研究,于是决定使用这个。找这个东西就花了几小时。
 
之后总体没碰到大的问题。对SVG的结构又有了更深的理解。
另外,对于d3 zoom的初始值的设定,默认情况老是从1开始,但是要求是从我设定的值开始。花了2小时用google查资料,最后发现了:
Javascript代码
  1. zoom.scale(ratio_init);  
  2. zoom.event(_svg.transition().duration(200));  
 
搞定了这个问题。
 
此次的最大收获就是:
国外好东西真多,google+英文关键词搜索才是王道。
分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3880