d3.js 已知两点,伪线段抛物线

原创 hmxcn 随笔 d3.js 241阅读 2017-11-28 11:26:10 举报

因为公司需要,需要做一个基于地图实施更新的功能,最近一直在研究如何根据已知两点产生平滑的贝塞尔曲线
1.本身想做的是类似于echarts

d3.js已知两点,伪线段抛物线,本来echarts官网存在的,产生数据变化后有一个飞机飞过去的样式,现在官网示例好像是没有了
2.研究了2 天d3贝塞尔曲线,但是发现d3,绘制贝塞尔曲线所需要的参数有3个参数(x1 y1 x2 y2 x y) 实点 并不是很清楚怎么获得,所以我这里采取了取巧的方式,创建了20个circle ,并用delay延时动画,控制每一个小球的时间,模仿达到了从一个点到另一个点的过程

html 代码

3.在植入到地图中去的时候,因为投影的缘故,会导致地图上的点会产生误差,所以需要加上projection 进行点的投影
例如 x1 = projection([json[0].x, json[0].y])[0]
y1 = projection([json[0].x, json[0].y])[1]
x2 = projection([json[1].x, json[1].y])[0]
y2 = projection([json[1].x, json[1].y])[1]

4.最终实现效果图

d3.js已知两点,伪线段抛物线

评论 ( 4 )
最新评论
hmxcn 3F 2017-11-28 16:20:30 4F

哈哈~ヽ( ̄▽ ̄)و

ls1210485244 2F 2017-11-28 16:01:57 3F

嗯啊 你说echarts官网有类似效果 但是现在找不到了 所以分享给你啊

hmxcn 1F 2017-11-28 14:40:33 2F

这个是echarts

ls1210485244 2017-11-28 13:47:40 1F