Question

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

但是，如果我想过滤这些数据并仅显示“位置”==美国的汇总怎么办？我假设我必须首先将数据读入变量，但我还没有找到有关如何完成此操作的文档。我还假设我必须先在一个部分中定义显示，然后将数据加载到这个区域。

Answer 1

执行此操作时：

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)

Answer 2

var country = "USA";


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()
     .filter(function(d) { return d.location == country })
       .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")
})

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

2 个答案: