携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 26 天，点击查看活动详情
D3 或则叫(D3.js)是一个基于 web 标准的 JavaScript 可视化库。 D3 可以借助 SVG、Canvas 以及 HTML 将你的数据生动的展现出来。D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术，让你可以借助于现代浏览器的强大功能自由的对数据进行可视化。今天我们就一起来学习一下 D3 吧！
D3 安装
因为 D3 是基于 web 标准的 JavaScript 可视化库，因此我们可以在网页中直接使用 D3，我们有两种方式可以引入 D3。可以通过直接运行 npm install d3，将 D3 安装到我们的项目中来；也可以通过 script 标签直接引入一个 cdn 的地址，这样就可以直接在项目中进行使用了。
第一个示例
我们一般学习任何语言或框架，最先实现的永远都是 Hello World!，那么我们今天也用 D3 来实现一个 Hello World!。在 D3 中，我们可以像使用 jQuery 一样选取我们要操作的 DOM 元素，然后对这个元素进行相关的修改。
首先， D3 中有一个 API 是 select，它就是用来帮助我们选择元素的方法；其次在选取的元素中，我们可以通过 text 方法来改变这个元素显示的文字，就类似 jQuery 中的 text 一样，下面我们一起来看一下第一个示例是怎么样的，代码如下：
这就是一个最简单的示例了，当然 D3 能做的可不仅仅只的改变一个 DOM 元素的文字，它还有很多其它好玩的地方，但是我们学习任何一门语言或框架时，都需要先从基础学起，因此接下来我们就要慢慢的学习 D3 相关的 API 了，只有先学会这些基础的 API ，我们才能写出更多炫酷的效果，让我们开始吧！
SVG
在学习 D3 相关 API 之前，不得不先提一下 SVG，因为我们使用 D3 操作的 DOM 元素基本都是 SVG，那么为什么要用 SVG 呢？试想一下如果我们操作的是一张图片，然后对它进行放大缩小，就会造成失真。而 SVG 由于是矢量图，不管是放大或缩小，都不会对它的展示有任何的影响，因此我们要先了解一下如何使用 D3 来操作 SVG。
我们来看一个简单的例子，如下：
在这个例子中，我们通过 SVG 相关基本的 API 来创建了一个圆，然后展示在页面中。D3 只是用于选择 SVG 元素，最终的图形创建是由 SVG 自己完成的。
要学 D3，就需要先学会 SVG 相关的操作，下一节我们继续一起来学习 SVG 相关的操作。
最后
我们要知道 D3 是做什么的，能够用于实现什么样的效果，并且掌握 SVG 最基本的操作，这样才能玩转 D3，最后，我们一起加油吧！
未完待续。。。
最后，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家
