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