D3js 全球风场、温度（自有记录）

话不多说，上截图

自我感觉看起来还挺震撼的吧，上面的线条都是动态的。

开始&感谢

最近公司项目需要，做一个全球风场的展示，从来没搞过D3js的我一下懵逼了，我是谁，我在哪，我在干什么。。。幸好有成熟的开源项目给我参考，顿时感觉人生有了方向。下方有github链接，非常感谢大佬的开源项目，再次感谢。

Github 上的开源项目cambecc/earth 这个人老牛逼了

earth.nullschool.net 这是他们的企业项目

D3js 这个库太强大了

看源码

遇到问题不要慌，拿到源码一顿抄。源码打开一看。。。。。。全是英文。注释还比较少，还没有专业文档，哎。。。一度想放弃。但是碍于生活压力，还是决定去尝试。只要找到切入点，源码还是能看懂的，当然看懂的只是思路，气象学，海洋学之类的算法至今没有看懂。

• 尝试修改部分参数，一顿修改加console之后，看效果来确定改参数是干什么的，终于搞懂了大概的流程思路
• 数据都是一维数组，实际上是个矩阵二维数组打平后的数据
• 分多层渲染不同的东西
• 第一层主要通过D3 geo 来渲染海岸线、湖泊、河流等等，也就是我们看到的地图线条
• 第二层主要是动画层，
• 第三层渲染数据颜色，比如每个地方的温度对应不同颜色
• 第四层，操作层，用来监听鼠标事件等
• 第二层：动画层主要是通过u v 来计算风向，最终的粒子动画就是通过递归，每40毫秒让当前线条移动，移动到最大生命值的时候归位到初始值，这样来形成一个线条动画的。
• 第三层：覆盖的颜色图层需要插值算法，这一层的主要思路：获取当前视图的大小，遍历数据看是否在当前视图下显示，如果显示，则通过插值算法计算该点周围的数据，并且通过颜色范围来计算该点的颜色，最终生成一个全是颜色的ImageData(每个像素点的颜色会设置上)，之后再将这个生成的canvas显示出来就ok啦。

动手尝试

到这里，基本思路都懂了，该动手尝试了，按照自己的思路，把需要用到的代码一点一点拷贝过来，尝试看看能不能跑出来。这一步是为了验证之前的想法并尝试拷贝代码，对流程有一个更加清晰的认识，跑通之后，挺有成就感的。更多的是感慨大佬的厉害。

搞项目

到这里对这个项目基本上有了一定理解，接下来就是按照自己的思路将代码进行整理，按照自己的想法做出一个项目来，将别人的实现，自己的思路，整合成自己风格的一个项目就ok啦。 因为我是搞Vue的，所以用Vue构建自己的项目，当用自己的思路将项目搞出来后，一下发现代码很清晰，思路更清晰了，每一步需要做什么，有哪些步骤，都会变的无比清晰，甚至后期对项目进行扩展，就很简单了。

剧终

本文主要记录下自己学习这个项目的一点心理活动，挑战一个自己从来没碰过的东西还是很有成就感的。提升了自信心，感觉再去挑战未知东西的时候，多了一些底气，仅自己记录用。喷子绕行。。。。。。