D3で一意の値のみを表示するリストをソート

Question

D3で一意の値を示すリストをソートする必要があります。私はそれを並べ替えることができますが、それはすべての発生を示しています。ファイルはcsvで、 "Zip Code"列でソートしたいと思っています。バックグラウンドでは、後でドロップダウンメニューでこのリストを使用します。これはデータをフィルタリングする方法です。

これは私が持っているものです。@mbostockによってpost here後

d3.map(buckets, function(d) { return d["Zip Code"]; }).size(); 

しかし：

私のようなソートされたリスト与え

var heatmapChart = d3.csv("heatmap.csv", function(buckets) { 
    buckets.sort(function(a, b){ 
     return d3.ascending(a["Zip Code"], b["Zip Code"]); 
    }) 

：私も使用

10001 
10001 
10001 
10005 
10005 
... 

をそれはそれをしなかった。 （ここではdataと呼ばれる）オブジェクトの配列でユニークな値を得るために、ES6を使用して

Answer 1

あなたが行うことができ、単に本：

var buckets = [...new Set(data.map(d => d.zip))]; 

はのアクションでそれを見てみましょう。以下のデモでは、Stackスニペットで実際のCSVファイルをアップロードできないため、<pre>要素を使用してCSVを再現しています。私は実際の状況をよりよくシミュレートするために、2列のCSVを使用しています（d3.csvは、あなたの質問が示唆するように、単純な配列ではなくオブジェクトの配列を提供します）。

この最初のデモでは、sort()機能のみを使用しています。スプレッド演算子とnew Set()を使用して、今すぐ同じコードを

var data = d3.csvParse(d3.select("#csv").text()); 
 

 
data.sort(function(a, b) {return d3.ascending(a.zip, b.zip);}); 
 

 
console.log(data.map(d=>d.zip));

pre{ 
 
    display: none; 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<pre id="csv">name,zip 
 
a,1001 
 
b,1003 
 
c,1008 
 
d,1005 
 
e,1001 
 
f,1003 
 
g,1007 
 
h,1002 
 
i,1003 
 
j,1008 
 
k,1002</pre>

：あなたは、データがソートされているが、我々は値を繰り返していることがわかります。これは2段階の解決策です。最初にデータをソートした後、一意の値を持つ配列を作成します。それを確認してください：

var data = d3.csvParse(d3.select("#csv").text()); 
 

 
data.sort(function(a, b) {return d3.ascending(a.zip, b.zip);}); 
 

 
var buckets = [...new Set(data.map(d => d.zip))]; 
 

 
console.log(buckets);

pre{ 
 
    display: none; 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<pre id="csv">name,zip 
 
a,1001 
 
b,1003 
 
c,1008 
 
d,1005 
 
e,1001 
 
f,1003 
 
g,1007 
 
h,1002 
 
i,1003 
 
j,1008 
 
k,1002</pre>

EDIT：ここではOPで尋ね前ES6ソリューション、次のとおりです。

グレート

var data = d3.csvParse(d3.select("#csv").text()); 
 

 
data.sort(function(a, b) {return d3.ascending(a.zip, b.zip);}); 
 

 
var buckets = data.map(function(d){ return d.zip}).filter(function(value, index, self){ 
 
    return self.indexOf(value) === index; 
 
}); 
 

 
console.log(buckets);

pre{ 
 
\t display: none; 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<pre id="csv">name,zip 
 
a,1001 
 
b,1003 
 
c,1008 
 
d,1005 
 
e,1001 
 
f,1003 
 
g,1007 
 
h,1002 
 
i,1003 
 
j,1008 
 
k,1002</pre>