帮助理解D3的SVG基础知识

Posted 2023-03-15

参考技术A 在之前的项目中需要用到D3来绘制可视分析视图，参考了一些例子之后，能够依葫芦画瓢。但是想要自己创作的时候却感受到了技术上的瓶颈。以我对D3粗浅的理解，认为其是基于SVG的lib，即D3中图像的绘制的基础就是SVG，工欲用D3，必先理解SVG。遂决定先补一补SVG的知识。讲的不会很具体，主要是概念上的东西。
接下来主要涉及到的有：

栅格化的图像则是把原来一个像素点放大，这样会导致放大之后的图片糊啦。而svg是矢量图，矢量图就是不论放大多少倍，他都不会变形变模糊。这是怎么做到的呢？来自于矢量图的放大就是把形状坐标的值按倍数变大，重新绘制就完事了。所以说，svg绘制的关键就在于坐标点的确定。当我在画一个svg的时候，我其实要找的就是能够确定这个svg图像的坐标点。

画画要纸，画SVG则要画布。画布就是这个SVG元素。 width 和 height 的指定单位可以是 px em 百分比 。
画布有一个默认的坐标系。

绘制的时候，如果遇到了需要旋转、缩放、移动的情况。其实并不是对元素本身的坐标进行计算然后改变，而是将元素的坐标系进行变换，变换完毕之后，在新的坐标系去绘制图像。这样做的好处是让数学计算变得更加简单。毕竟坐标系可以近似看作一个长方形，变换起来计算量并不会太大，相反，如果是对图形变换，绘制一个奇形怪状的东西，则对每一个坐标进行变换计算，就非常可怕了（类似一个复合函数的计算，为了简化先算外层再算内层一般）。

path 就相当于你画的每一笔。绘制的过程就是行笔的过程。笔的连线由坐标点去控制。

一些常用的图形如 circle rect line 等，是可以直接使用的，只要给它设置了它接受的参数。

贝塞尔曲线对于熟悉Illustrator的人来说并不会陌生。svg是支持画两次贝塞尔曲线（一个控制点）与三次贝塞尔曲线（两个控制点）的。这就给画出“优雅”的图形成为可能。

最后放一篇今天读到的很好的文章： How do you learn d3? 这篇文章总结了几位擅长数据可视化的学习经验：学习d3应该是目标导向的，先知道自己要画的是什么，然后再去学习怎么画。这也给我的学习可视化的方法上提供了思路：不必追求把D3的api看的滚瓜烂熟，D3不过是一个用于实现的设计的工具。

浅谈SVG（可缩放的矢量图形）

　　前一段项目中用到了svg图片就和其他的元素一样 直接引用就可以展示在页面上，因为项目紧张没有仔细的研究，最近在扩展自己的基础知识，偶然看到了这个东西，于是总结了一些博客园中关于这个svg的基础知识，只是自己基础的理解，没有更深层次的理解，但是并不想作大自然的搬运工，只是想把自己理解到的和大家分享一下，废话不多说，下面开始正式的讲解：

　　1.SVG是啥

　　　　我的理解就是一个文本文件，但是能够被浏览器渲染成一个图像。

　　　　那我们已经有常用的图片了为什么还要用这个生成图片呢？

　　　　　　相对来说，他比普通的jpg/png图片占用的体积更小；而且能够随意的放大缩小并不会失真。以下是百度百科的解释，相信看起来会更加清晰：

　　　　　　

　　2.SVG怎么用：

　　　　1. 直接在html文件中用SVG标签插入；<svg>....</svg>

　　　　2. 也可以通过 img 等标签直接引用已经写好的SVG文件；

　　　　　　<img src="svgDemo.svg">

　　　　还有其他几种用法：放到css样式中/转化成base64

　　3. SVG的语法：

　　　　可以在W3school或者菜鸟教程上面看到详细的讲解；

　　总结：

　　　　实际项目中应该是视觉提供给我们一个SVG文件，然后我们负责把这个文件展示在页面当中，具体的图像绘制规则接触的比较少，但是我们可以查看对应的svg文件（只是一个文本文件，　通过文本编辑起就可以打开）来学习绘图的方法。

　　　　学无止境，每一门学问都是值得深究的，但每个人的精力也是有限的，希望每个人都能用有限的精力去学习和创造更多的知识，只是因为热爱，而不是为了完成任务。