我是 D3.JS 的新手,作为初学者,我不知道如何处理一个要求很高的程序,该程序将从 csv 文件中读取大量数据,然后根据输入进行自定义输出。我正在做一些测试代码,以便感受以下是我正在使用的 CSV 文件:
location,age_group_id
USA,34
USA,34
USA,36
AFG,34
AFG,34
AFG,36
AFG,36
下面的代码可以很好地根据此输入生成一个简单的条形图:
<doctype html>
<html>
<head>
<title> Test </title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
d3.csv("mydata.csv", function(error, data){
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", function (d) { return d.age_group_id * 10} )
.attr("height", 48)
.attr("y", function (d, i){return i * 50} )
.attr("fill", "blue")
})
</script>
</body>
</html>
但是如果我想过滤这些数据并且只显示“位置”==美国怎么办?我假设我必须首先将数据读入变量,但我还没有找到有关如何完成此操作的文档。我还假设我必须首先在一个部分中定义显示,然后将数据加载到该区域。
最佳答案
当你这样做时:
d3.csv("mydata.csv", function(error, data){
所有 CSV 都会作为对象数组加载到名为 data
的变量中。
因此,您可以基于data
创建一个新的数据集:
var dataUsa = data.filter(function(d){
return d.location === "USA";
});
并在栏中使用此数据集:
canvas.selectAll("rect")
.data(dataUsa)
关于javascript - 如何过滤和省略 d3.js 的输入数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40854061/