Content
12 Lessons • 0 Quizzes • 0 Challenges
简介
- 1
我们开始需要什么？
- 2
什么是 D3.js？
从一个简单的图开始
- 1
一个简单的图
- 2
HTML
- 3
层叠样式表（CSS）
- 4
D3 JavaScript
- 5
设置边距和绘图区域
- 6
获取数据
- 7
格式化日期和时间
- 8
设置比例尺、域和范围
- 9
向折线函数添加数据
- 10
添加 SVG 元素
- 11
真正画点东西吧！
- 12
挑战：更改X轴显示
- 13
挑战解决方案：更改X轴显示
- 14
挑战：直线属性
- 15
挑战解答：线段属性
- 16
简单图概念测验
- 17
作者注
我们可以用简单图实现的事项
- 1
设置和配置坐标轴
- 2
更改坐标轴上的刻度数量
- 3
为图表坐标轴旋转文本标签
- 4
使用指定值格式化日期和时间轴
- 5
添加X轴标签
- 6
添加纵坐标轴标签
- 7
如何为你的图表添加标题
- 8
将折线图改为散点图
- 9
平滑图线
- 10
创建一条虚线
- 11
填充图形下方的区域
- 12
添加阴影效果
- 13
向图表添加网格线
- 14
向图表中添加多条线
- 15
在图表上标记多条线
- 16
图表的多轴显示
- 17
挑战：格式化工具
- 18
挑战解答：格式化工具
- 19
挑战：旋转标题
- 20
挑战解答：旋转标题
- 21
关于简单图表概念的测验
元素、属性和样式
- 1
D3 元素的框架
- 2
元素：圆形、椭圆和矩形
- 3
元素：线段、折线、多边形和路径
- 4
元素：剪裁路径
- 5
元素：文本
- 6
属性：点数
- 7
属性：变换
- 8
属性：宽度、高度、长度和文本
- 9
样式：填充、描边、不透明度和填充不透明度
- 10
样式：描边不透明度、宽度、虚线模式和线端类型
- 11
样式：书写模式与字形垂直方向
- 12
在层叠样式表中使用样式
- 13
挑战：绘制一个椭圆
- 14
挑战解答：绘制椭圆
- 15
挑战：重叠的圆
- 16
挑战解答：重叠的圆
- 17
元素、属性和样式测验
条形图和直方图
- 1
条形图和直方图
- 2
柱状图
- 3
直方图
- 4
挑战：柱状图
- 5
挑战解答：柱状图
- 6
挑战：直方图
- 7
挑战解答：直方图
- 8
关于条形图和直方图的测验
树状图
- 1
什么是树状图？
- 2
一个简单的树状图解释
- 3
水平树状图详解
- 4
样式：更改节点和连接线的颜色
- 5
样式：将节点更改为不同形状
- 6
使用图像作为节点
- 7
从外部数据生成树状图
- 8
从“扁平”数据生成树形图
- 9
从CSV文件生成树状图
- 10
一个交互式树状图
- 11
挑战：数据格式
- 12
挑战解决方案：数据格式
- 13
挑战：节点与链接
- 14
挑战解决方案：节点与链接
- 15
树状图测验
桑基图
- 1
桑基图简介
- 2
桑基图代码
- 3
从 JSON 格式化数据
- 4
从 CSV 文件中格式化数据
- 5
挑战：显示 JSON
- 6
挑战解答：显示 JSON
- 7
挑战：更改链接颜色
- 8
挑战解答：更改链接颜色
- 9
关于桑基图的测验
子弹图
- 1
子弹图结构简介
- 2
D3.js 用于绘制子弹图的代码
- 3
调整和修改子弹图组件
- 4
添加更多范围和度量
- 5
挑战：移动字幕
- 6
挑战解答：移动字幕
- 7
挑战：反转图表
- 8
挑战解决方案：反转图表
- 9
关于子弹图的测验
使用 D3.js 进行映射
- 1
GeoJSON 和 TopoJSON
- 2
从一个简单的 Map 开始
- 3
地图的缩放与平移
- 4
在地图上显示点
- 5
挑战：显示国家
- 6
挑战解决方案：显示国家
- 7
挑战：显示家乡
- 8
挑战解决方案：展示你的家乡
- 9
映射测验
各种技巧与提示
- 1
提示工具
- 2
获取提示
- 3
在提示工具中包含 HTML 链接
- 4
颜色
- 5
过滤
- 6
使用 'IF' 语句选择项目
- 7
线条上的颜色渐变
- 8
区域颜色渐变
- 9
过渡效果
- 10
显示/隐藏元素
- 11
使用 HTML 输入
- 12
使用“范围”输入
- 13
使用多个输入
- 14
使用输入旋转文本
- 15
使用 D3.js 的数字输入
- 16
向你的图表中添加一个 HTML 表格
- 17
更多表格的混乱
- 18
向 D3 对象添加网页链接
- 19
导出图像
- 20
理解 JavaScript 对象表示法（JSON）
- 21
挑战：旋转正方形
- 22
挑战解答：旋转正方形
- 23
挑战：散点图
- 24
挑战解答：散点图
- 25
关于工具提示的测验
D3.js 示例详解
- 1
多行图：用途、代码与说明
- 2
多行图：应用颜色和图例
- 3
多行图：使其具备交互性
- 4
差异图表：目的、代码与描述
- 5
差异图表：数据的嵌套与整理
- 6
差异图：利用领域作弊
- 7
差异图：裁剪与叠加区域
- 8
在我们的差异图中增加更多内容
- 9
我最喜欢的折线图悬停提示方法
- 10
我最喜欢的工具提示：最后一个区块
- 11
我最喜欢的提示框：复杂版本
结论
- 1
总结
Certificate of Completion
Showcase your accomplishment by sharing your certificate of completion.
Course Author:Anonymous User