随笔分类 -  d3+svd

svg圆环缓冲动画
摘要：代码如下 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #hhn { width: 500px; height: 500px; position: relati 阅读全文
posted @ 2017-09-14 10:14 大棒子 阅读(926) 评论(0) 推荐(0)
d3创建多个svg元素
摘要：当然也可以创建dom var svg = d3.select('#svg'); svg .slectAll('circle.bb') //选中DOM中的所有circle.bb标签，当DOM中不存在circle.bb时，那么这个返回值将是null .data(new Array(50)) //计算并且 阅读全文
posted @ 2017-09-04 11:08 大棒子 阅读(1940) 评论(0) 推荐(0)
svg实现绘制路径动画
摘要：1，首先用svg绘制一条path路径，然后进行如下操作 ps: 下面是svg中两个属性及值的意义 stroke-dasharray是让你指定画出的线段每段的长度，第二个值是各段之间空隙的长度。 stroke-dashoffset是让你指定每个小段的起始偏移量。 var path = document 阅读全文
posted @ 2017-09-02 14:48 大棒子 阅读(2816) 评论(0) 推荐(0)
d3操作svg路径动画，及dom移动
摘要：图片跟随路径循环运动，dom也跟着路径运动(利用实时获取坐标位置的方法，改变transform) 1，准备路径 a,自己脑补路径 b,在ps上画好，然后在保存成png-24图片，背景透明，在网站https://www.vectorizer.io/上生成path路径 2，以下是完整代码及注释 <!DO 阅读全文
posted @ 2017-08-24 11:09 大棒子 阅读(1309) 评论(0) 推荐(0)