用D3顯示一個只顯示唯一值的列表

Question

我需要在D3上對顯示唯一值的列表進行排序。我可以對它進行排序，但它顯示了它的所有事件。該文件是一個csv，我想通過其「郵編」列進行排序。爲了背景，我將稍後使用這個列表作爲下拉菜單，所以這是一種過濾數據的方式。

這是我有：

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 
... 

我也用過：

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

繼post here通過@mbostock但那沒有做到。

Answer 1

使用ES6，以獲得對象（這裏稱爲data）數組中的唯一值，你可以做簡單：

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

讓我們來看看它的行動。在下面的演示中，我使用<pre>元素來重現CSV，因爲Stack代碼段不允許我上傳真正的CSV文件。除此之外，我使用兩列的CSV，以更好地模擬真實情況（d3.csv爲您提供一組對象，而不是簡單的數組，因爲您的問題可能會提示）。

在第一個演示中，我們只使用sort()函數。你可以看到，數據的排序，但我們已經重複值：

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>

現在同樣的代碼，利用擴展運算符和new Set()。這是一個兩步驟的解決方案：首先我們對數據進行排序，然後我們創建具有唯一值的數組。檢查它：

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>

編輯：這是一個預ES6的解決方案，通過OP問：

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>