使用D3显示仅列出唯一值的列表 [英] Sort a list with D3 showing only unique values

问题描述

我需要在D3上对列表进行排序，以显示唯一值。我可以对它进行排序，但它会显示它的所有出现次数。该文件是一个csv，我想通过它的邮政编码列对其进行排序。仅仅是为了背景，我将在稍后使用此列表作为下拉菜单，因此这是一种过滤我的数据的方法。

这就是我所拥有的：

  var heatmapChart = d3。 csv（heatmap.csv，function（buckets）{
 buckets.sort（function（a，b）{
 return d3.ascending（a [Zip Code]，b [邮编]）; 
}）
  

这给了我一个排序列表，如：

  10001 
 10001 
 10001 
 10005 
 10005 
 ... 
  

我还用过：

  d3.map（buckets，function（d）{return d [Zip Code];}）。size（）; 
  

通过@ 在此发布之后mbostock但是没有这样做。

解决方案

使用ES6，以获取对象数组中的唯一值（这里称为数据）你可以这样做：

  var buckets = [...新集（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，zipa，1001b，1003c，1008d， 1005e，1001f，1003g，1007h，1002i，1003j，1008k，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（存储桶）;  

  pre {display：none;}  

 < script src =https://d3js.org/d3.v4.min.js>< / script>< pre id =csv> name，zipa，1001b，1003c， 1008d，1005e，1001f，1003g，1007h，1002i，1003j，1008k，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，zipa ，1001B，1003C，1008D，1005e，1001F，1003克，1007h，1002I，1003j，1008k，1002< /预>  

I need to sort a list on D3 showing unique values. I can sort it but it's showing all the occurrences for it. The file is a csv and I want to sort it by its "Zip Code" column. Just for background, I'm going to use this list later for a drop down menu, so this is a way to filter my data.

This is what I have:

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

Which gives me a sorted list like:

10001
10001
10001
10005
10005
...

I also used:

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

Following a post here by @mbostock but that didn't do it.

解决方案

Using ES6, in order to get the unique values in an array of objects (here called data) you can do simply this :

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

Let's see it in action. In the following demos, I'm using a <pre> element to reproduce a CSV, since the Stack snippet doesn't allow me to upload a real CSV file. Besides that, I'm using a CSV with two columns, to better simulate a real situation (d3.csv gives you an array of objects, not a simple array, as your question may suggest).

In this first demo we use the sort() function only. You can see that the data is sorted, but we have repeated values:

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>

Now the same code, using the spread operator and new Set(). This is a two-step solution: first we sort the data, and after that we create the array with unique values. Check it:

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: Here is a pre-ES6 solution, asked by 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{
	  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>

这篇关于使用D3显示仅列出唯一值的列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！