如何篩選和省略d3.js的輸入數據

我是D3.JS的新手，作爲初學者，我不確定如何處理一個要求很高的程序，它將從csv文件中讀取大量數據，然後根據輸入進行定製輸出。我做了一些測試代碼，以獲得的這裏感受到的是我使用的CSV文件：如何篩選和省略d3.js的輸入數據

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>

但是，如果我想過濾這些數據，只顯示出「位置」==美國？我假設我必須首先將數據讀入一個變量，但我還沒有找到關於如何完成的文檔。我還假設我將不得不首先在一個部分中定義顯示，然後將數據加載到這個區域。

來源

2016-11-28 xarzu

看一看過濾功能（請參閱http ：//bl.ocks.org/d3noob/8dc93bce7e7200ab487d作爲例子） –

謝謝，蒂姆，工作 – xarzu

當你這樣做：

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)

來源

2016-11-28 22:39:42

這可能也會起作用。感謝您的解決方案 – xarzu

-1

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") 
})

來源

2016-11-28 23:49:38 xarzu

如何篩選和省略d3.js的輸入數據

回答

相關問題