D3在加载数据时可以支持一堆文件类型。例如：
- d3.text表示纯文本
- d3.json表示json
- d3.xml表示xml
- d3.html表示html
- d3.csv表示逗号分隔值
- d3.tsv表示表格分隔值
我们通常使用d3.csv或d3.json。
假设您有一个包含一些国家信息的文件/countries.csv
country,gold,silver
USA,10,20
China,20,100
India,200,50
Russia,25,80
Germany,10,200
UK,150,75
France,10,75
UAE,30,150
Canada,100,15
使用d3.csv将其转换为对象数组
%%HTML
<meta charset="utf-8">
<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view011301"></div>
<script>
async function buildView(){
data = await d3.csv("http://cyber-life.cn/d3js-course/data/countries.csv");
console.log(data);
svg = d3.select("#view011301")
.append("svg")
.attr("width", 250)
.attr("height", 250)
.attr("style", "border:1px solid red;")
svg.selectAll("circle")
.data(data).enter()
.append("circle")
.attr("cx", function(d,i) {return d.gold})
.attr("cy", function(d,i) {return d.silver})
.attr("r", 4)
}
buildView();
</script>
js调试输出数据格式
本教程的所有数据文件都放在了我的个人博客网站上：http://cyber-life.cn
关于代码运行效果
由于在简书上不能展示代码的运行结果，我在网上搭建了一个 jupyter notebook http://jupyter.cyber-life.cn/lab，我将本套教程的笔记和源代码写在了上面，可以在线查看代码运行效果，还可以调试代码，有需要的同学私信我。
