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>

しかし、私はこのデータをフィルタリングし、 "location" == USAのputだけを表示したいのですが？変数にデータを最初に読み込まなければならないと仮定しますが、これがどのように行われたかのドキュメントはまだ見つかりません。私はまた、セクションの表示を最初に定義し、このエリアにデータをロードする必要があると仮定します。

出典

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の入力データをフィルターに掛ける方法と省略する方法

答えて

関連する問題