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

Question

我正在使用以下代码通过 d3.js

填充我的组合框

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.But 我只想看到 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 模块现在是 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);

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

How to select unique values in d3.js from data

html

javascript

d3.js