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

How to select unique values in d3.js from data

本文关键字：js 唯一 d3 选择 数据      更新时间：2023-12-17

我使用以下代码使用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。但在组合框中，我只想看到I-80一次。我该怎么做？

仅通过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已被弃用-d3开发人员现在建议只使用JavaScript的内置Array.map。（事实上，整个d3-collection模块现在都不推荐使用，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);
相关文章：