超级会员免费看
D3.js 数据可视化实战：从基础图形到交互图表
1. D3 简介
D3（Data-Driven Documents）是一个强大的数据可视化库，它不仅可以用于绘制图形，还能创建各种复杂的数据可视化效果，如柱状图、散点图、节点链接图等。以下是 D3 可实现的部分可视化类型：
| 可视化类型 | 示例 |
| — | — |
| 非图形可视化 | 柱状图、散点图、箱线图 |
| 通用图形可视化 | 节点链接图、弦图、桑基图 |
| 层次结构可视化 | 树状图、可折叠树、树形图、旭日图 |
2. 绘制简单图形
2.1 数据准备
首先，我们使用一个包含四个节点和四条边的简单数据集来绘制图形。以下是完整的 HTML 页面代码，包含了数据和绘图逻辑：
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// this is the graph data
graph = {
"nodes":[
{"name":"Ann","NumEmail":1,"SumSize":100},
{"name":"Ben","NumEmail":4,"SumSize":500},
{"name":"Tim","NumEmail":2,"SumSize":200},
{"name":"
订阅专栏 解锁全文
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
