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

Question

我使用以下代码使用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一次.我怎样才能做到这一点？

Answer 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;});

Answer 2

d3.map已弃用 - d3 开发人员现在建议仅使用 JavaScript 的内置Array.map. （事实上​​，整个d3-collection模块现在已被弃用，其理由与 类似d3.set。）

Array.map这是在 ES6 中使用、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);