javascript - 使用仅显示唯一值的 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>

编辑:这是 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>