携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 26 天，点击查看活动详情
前因
在上一节中，我们已经对 D3 有了一个基本的认识，并且知道 D3 中主要操作的 DOM 元素是 SVG，那么这一节我们就继续来学习 SVG 相关的操作吧！
查询 SVG
在 D3 中，当我们要选取 SVG 元素时，我们可以使用 select 这个 API，它还有一个 selectAll 的 API，这两个 API 的唯一区别就是，前则只能选取一个元素，而后者可以选取多个元素。select 这个 API 的使用跟 jQuery 中的 $ 是很类似的，如果你用过 jQuery，肯定会很容易就上手 D3。
设置 SVG
在 SVG 中有很多常见的属性，例如：id、class、x、y、cx、cy、fill、stroke、width、height、r 等等，而我们可以通过 D3 来设置 SVG 这些常见的属性，以此来实现我们想要的效果。当然这里只是列出了一些基本的属性，关于 SVG 更多的操作数据，可以狠戳这里。
那我们如何使用 D3 来设置 SVG 的相关属性呢？其实也很简单，通过 attr 这个 API 来完成即可，例如：d3.attr('fill', 'red')，这句代码的意思就是修改元素的填充属性为红色，attr 中有两个参数，第一个参数就是需要修改的属性的名称，第二个参数则是修改属性的值，具体的如下所示：
添加、删除元素
在 D3 中，我们可以通过 append 来创建一个新的元素，通过 remove 来删除一个元素，需要注意的是，不管是对元素做什么操作，我们都需要先使用 select 选择到这个元素才能进行相关的操作。在上述的例子中已经使用过 append 来创建一个矩形，这里就不做示例了。
比例尺
比例尺 主要用于将实际的数据空间映射到屏幕的空间中来，同时 比例尺 也是非常重要的，会经常同时传递坐标轴与数据。简单来说就是要将设置的数据点转换为坐标轴展示在页面中，通过我们需要用到的 API 有 scaleLiner、 scaleBand 、domain、range、max、 padding 等等，相关 API 的解释可以狠戳这里进行查看。
我们通过学习完上述 API 后，最终实现一个具体的案例来帮助我们加深对 D3 和 SVG 相关的操作，具体的代码如下：
最后
这一小节我们继续学习了 D3 对 SVG 的相关操作，包括创建、删除、设置属性、查询元素等等，以及简单的讲解了比例尺的概率，下一节我们将继续学习 D3 对 SVG 的相关操作，一起加油吧！
未完待续...
最后，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家
