D3 笔记四：分组元素、坐标轴、SVG基本图形

最新推荐文章于 2024-11-11 14:39:49 发布

沐风的心

最新推荐文章于 2024-11-11 14:39:49 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： D3笔记文章标签： d3 svg 基本图形分组元素坐标轴

本文链接：https://blog.youkuaiyun.com/JimmyLuo17/article/details/76359407

D3笔记专栏收录该内容

10 篇文章

订阅专栏

这篇博客总结了D3.js中关于SVG的基本图形，包括矩形、圆形、椭圆、线段、折线、多边形和路径，并详细介绍了分组元素（group）的应用。此外，文章还探讨了如何在D3中定义和添加坐标轴，通过使用scale、orient、ticks等方法创建坐标轴组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文目前来说，是学完极客学院的《D3.js 入门教程》之后的整理出来的精简知识版，仅仅是为了知识整理。后期我会随着学习的深入，在这个基础上，进行维护与更改。

六种基本图形
在 SVG 画布的预定义元素里，有六种基本图形：
- 矩形
- 圆形
- 椭圆
- 线段
- 折线
- 多边形
另外，还有一种比较特殊，也是功能最强的元素：
- 路径
画布中的所有图形，都是由以上七种元素组成。
分组元素
分组元素 <g>，是 SVG 画布中的元素，意思是 group，顾名思义此元素是将其他元素进行组合的容器。
定义坐标轴
直接先来看示例代码：
```
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];      // 数据
var linear = d3.scale.linear()      // 定义比例尺
    .domain([0, d3.max(dataset)])
    .range([0, 250]);

var axis = d3.svg.axis()    // 生成比例尺
    .scale(linear)      // 指定比例尺
    .orient("bottom")   // 指定刻度的方向
    .ticks(7);          // 指定刻度的数量
```
我们来看看几个新的方法 API：
- d3.svg.axis()：D3 中坐标轴的组件，能够在 SVG 中生成组成坐标轴的元素。
- scale()：指定比例尺。
- orient()：指定刻度的朝向，bottom 表示在坐标轴的下方显示。
- ticks()：指定刻度的数量。
注意：V4 版本中坐标轴是这么定义的：var xAxis = d3.axisBottom().scale(xScale);。

添加坐标轴
定义了坐标轴之后，只需要在 SVG 中添加一个分组元素，再将坐标轴的其他元素添加到这个分组元素里即可。以下为示例代码：

svg.append("g")     // 在svg中添加分组元素
    .attr("class", "axis")      // 设定坐标轴组件的class
    .attr("transform", "translate(20, 130)")        // 通过transform设定坐标轴的位置
    .call(axis);        // 添加坐标轴

在 D3 中，call() 的参数是一个函数。调用之后，会将当前的选择集作为参数传递给此函数。因此，下面两行代码是相等的：

svg.append("g").call(axis);     // 上下等价
axis(svg.append(g));