在使用 D3 进行数据可视化时,通常需要进行大量的数组操作。您可以使用 JavaScript 内置的数组方法,查找 D3 数组实用程序或下划线 .js 或者用短划线表示JavaScript 实用程序库。
但是,基本上,如果你只想过滤数据的话。使用 data.filter() 函数过滤文件 countries.csv 条件为 gold > 100.
<meta charset="utf-8">
<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view011401"></div>
<script>
async function buildView(){
data = await d3.csv("http://cyber-life.cn/d3js-course/data/countries.csv");
console.log(data);
data = data.filter(function(d) { return d.gold > 100 })
console.log(data);
svg = d3.select("#view011401")
.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>
关于代码运行效果
由于在简书上不能展示代码的运行结果,我在网上搭建了一个 jupyter notebook http://jupyter.cyber-life.cn/lab,我将本套教程的笔记和源代码写在了上面,可以在线查看代码运行效果,还可以调试代码,有需要的同学私信我。