Javascript 如何过滤和省略d3.js的输入数据_Javascript_Csv_D3.js

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

javascript csv d3.js

Javascript 如何过滤和省略d3.js的输入数据,javascript,csv,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> <

我是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”，函数（错误，数据）{
var canvas=d3.select（“body”）.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）
canvas.selectAll（“rect”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“宽度”，函数（d）{返回d.age\u group\u id*10}）
.attr（“高度”，48）
.attr（“y”，函数（d，i）{return i*50}）
.attr（“填充”、“蓝色”）
})

但如果我想过滤这些数据，只显示“位置”==USA的输出，该怎么办？我假设我必须首先将数据读入一个变量，但我还没有找到关于如何实现这一点的文档。我还假设我必须首先定义节中的显示，然后将数据加载到此区域。

执行此操作时：

d3.csv("mydata.csv", function(error, data){

所有CSV都作为对象数组加载到名为

data

的变量中

因此，您可以基于

数据创建新的数据集

：

var dataUsa = data.filter(function(d){
    return d.location === "USA";
});

并在条形图中使用此数据集：

canvas.selectAll("rect")
    .data(dataUsa)

执行此操作时：

d3.csv("mydata.csv", function(error, data){

所有CSV都作为对象数组加载到名为

data

的变量中

因此，您可以基于

数据创建新的数据集

：

var dataUsa = data.filter(function(d){
    return d.location === "USA";
});

并在条形图中使用此数据集：

canvas.selectAll("rect")
    .data(dataUsa)

看一看过滤函数（见示例）谢谢，蒂姆，它起作用了看一看过滤函数（见示例）谢谢，蒂姆，它起作用了这可能也起作用了。谢谢你的解决方案，这可能也行。谢谢你的解决方案