4、D3 数据可视化入门与基础图表实践

D3 数据可视化入门与基础图表实践

1. D3 数据加载

在使用 D3 进行数据可视化时，首先要掌握数据加载的方法。D3 提供了多种函数来加载不同格式的数据：
- d3.json(url, callback) ：用于获取 JSON 文件，加载完成后将其传递给回调函数。
- d3.text(url, callback) ：获取基本的文本文件，加载完成后传递给回调函数。
- d3.xml(url, [row], callback) ：获取 XML 文件，加载完成后传递给回调函数。

对于 CSV 文件，如果其格式特殊，可手动处理。可以使用 d3.text 函数加载，再使用 d3-dsv 模块中的函数解析数据，更多关于 d3-dsv 模块的信息可参考：https://github.com/d3/d3-dsv 。

2. 数据分组

假设我们有一份包含婴儿姓名及使用次数的数据，要创建一个展示男女前 10 名姓名的图表。首先需要对加载的数据进行分组，代码如下：

var grouped = _.groupBy(data, 'sex');
var top10F = grouped['F'].slice(0, namesToShow);
var top10M = grouped['M'].slice(0, namesToShow);
var both = top10F.concat(