如何从数据中选择 d3.js 中的唯一值答案

【问题标题】：How to select unique values in d3.js from data如何从数据中选择 d3.js 中的唯一值
【发布时间】：2015-02-17 22:05:34
【问题描述】：

我正在使用以下代码使用 d3.js 填充我的 Combobox

d3.csv("Results_New.txt", function(data) {
dataset=data;
d3.select("#road").selectAll("option")
.data(data).enter().append("option").text(function(d){return d.roadname;}).attr("value",function(d){return d.roadname;});
});

有相同名称的不同行。组合框正在填充这些重复的名称。例如，在多行中，道路的名称是 I-80。但在组合框中，我只想看到 I-80 一次。我该怎么做？

【问题讨论】：

在将数据传递给 D3 之前过滤重复数据。
我该怎么做。我正在读取 CSV 文件并使用从 csv 文件中读取的数据

标签： javascript html d3.js

【解决方案1】：

仅按d3.map过滤保留唯一键的数据

d3.select("#road").selectAll("option")
    .data(d3.map(data, function(d){return d.roadname;}).keys())
    .enter()
    .append("option")
    .text(function(d){return d;})
    .attr("value",function(d){return d;});

【讨论】：

d3.map(data, function(d){return d.roadname;}) 无法正常工作。现在在组合框中看不到任何值
在使用d3.map(data, function(d){return d.roadname;})之前是否需要做进一步的预处理
我如上编辑了我的代码。使用d3.map 映射数据后，返回一个由roadname 索引的对象数组。提取keys() 将为您提供一个clean 道路名称列表。
我的代码有问题？组合框中未显示某些道路。例如它显示 I-74 但不显示 I-74 Illinois

【解决方案2】：

d3.map 已弃用 - d3 开发人员现在建议仅使用 JavaScript 的内置 Array.map。（事实上整个d3-collection 模块现在是deprecated，d3.set 的基本原理类似。）

这是在 ES6 中使用Array.map、Set 和扩展运算符... 的一种简洁且（我认为）优雅的方式：

let options = [...new Set(data.map(d => d.roadname))]; 
// optionally add .sort() to the end of that line to sort the unique values
// alphabetically rather than by insertion order

d3.select('#road')
  .selectAll('option')
    .data(options)
  .enter()
    .append('option')
    .text(d => d)
    .attr('value', d => d);

【讨论】：