在之前的项目中需要用到D3来绘制可视分析视图，参考了一些例子之后，能够依葫芦画瓢。但是想要自己创作的时候却感受到了技术上的瓶颈。以我对D3粗浅的理解，认为其是基于SVG的lib，即D3中图像的绘制的基础就是SVG，工欲用D3，必先理解SVG。遂决定先补一补SVG的知识。讲的不会很具体，主要是概念上的东西。
接下来主要涉及到的有：
- 当我画一个svg的时候我在画什么
- 你已经是一个成熟的画布了，请你自己动一动
- path、g与d3
当我在画svg的时候我在画什么
栅格化的图像则是把原来一个像素点放大，这样会导致放大之后的图片糊啦。而svg是矢量图，矢量图就是不论放大多少倍，他都不会变形变模糊。这是怎么做到的呢？来自于矢量图的放大就是把形状坐标的值按倍数变大，重新绘制就完事了。所以说，svg绘制的关键就在于坐标点的确定。当我在画一个svg的时候，我其实要找的就是能够确定这个svg图像的坐标点。
你已经是一个成熟的画布了，请你自己动一动
画画要纸，画SVG则要画布。画布就是这个SVG元素。width和height的指定单位可以是px em 百分比。
画布有一个默认的坐标系。
image.png
{:height=100px}
绘制的时候，如果遇到了需要旋转、缩放、移动的情况。其实并不是对元素本身的坐标进行计算然后改变，而是将元素的坐标系进行变换，变换完毕之后，在新的坐标系去绘制图像。这样做的好处是让数学计算变得更加简单。毕竟坐标系可以近似看作一个长方形，变换起来计算量并不会太大，相反，如果是对图形变换，绘制一个奇形怪状的东西，则对每一个坐标进行变换计算，就非常可怕了（类似一个复合函数的计算，为了简化先算外层再算内层一般）。
path、g、与d3
path就相当于你画的每一笔。绘制的过程就是行笔的过程。笔的连线由坐标点去控制。
//由(220,230)出发，到（340,345）然后封笔
<path d="M 220 230 340 345 Z">
一些常用的图形如 circle rect line等，是可以直接使用的，只要给它设置了它接受的参数。
贝塞尔曲线对于熟悉Illustrator的人来说并不会陌生。svg是支持画两次贝塞尔曲线（一个控制点）与三次贝塞尔曲线（两个控制点）的。这就给画出“优雅”的图形成为可能。
最后放一篇今天读到的很好的文章：How do you learn d3?这篇文章总结了几位擅长数据可视化的学习经验：学习d3应该是目标导向的，先知道自己要画的是什么，然后再去学习怎么画。这也给我的学习可视化的方法上提供了思路：不必追求把D3的api看的滚瓜烂熟，D3不过是一个用于实现的设计的工具。
网友评论