我需要对 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();
继一个在这里发帖 https://github.com/d3/d3/issues/472作者：@mbostock 但这并没有做到。
使用ES6，为了获取对象数组（这里称为data）你可以简单地这样做：
var buckets = [...new Set(data.map(d => d.zip))];
让我们看看它的实际效果。在下面的演示中，我使用<pre>元素来重现 CSV，因为堆栈片段不允许我上传真正的 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>
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{
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
