javascript - 如何过滤和省略 d3.js 的输入数据

标签 javascript csv d3.js

我是 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/

相关文章:

javascript - 如何在CodeMirror中操作滚动事件?

javascript - 如何使用 WebGl 在 Canvas 上呈现二进制数据?

MySQL:LOAD DATA INFILE csv 忽略主字段插入

c# - App_Data 文件夹影子文件夹为空

d3.js - d3+交叉过滤器 : Date-axis renders pixelthin bars

javascript - 为什么 d3.json 不随请求发送 cookie?

javascript - 检查某个键的 json 值的一部分是否与给定输入相同 (javascript)

string - 将字符串转换为 csv Powershell

javascript - 不同大小节点的碰撞检测未按预期工作

javascript - Python 版本的 JavaScript ES6 符号