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

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

1. D3 数据加载与基础操作

D3 提供了多种数据加载方法：
- d3.json(url, callback) ：用于获取 JSON 文件，加载完成后将其传入回调函数。
- d3.text(url, callback) ：获取基本文本文件，加载完成后传入回调函数。
- d3.xml(url, [row], callback) ：获取 XML 文件，加载完成后传入回调函数。

对于 CSV 文件，如果格式特殊，可使用 d3.text 加载，再用 d3-dsv 模块的函数解析数据，更多信息可查看 d3-dsv 模块 。

以下是一个示例，展示如何对加载的数据进行分组处理，只保留男女各前 10 个名字：

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

这里使用了 lodash 的 groupBy 函数，根据每行数据的 <