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模块现在是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);

Answer 3

尝试this：

/* file.csv
name_of_my_header
mom
dad
brother
sister
dog
*/
button.onclick = function() {
    var s = d3.select("#road");
    d3.csv(prompt("URL please"), function(dataset){
        dataset.forEach(function(row) {
            s.append("option").text(row["name_of_my_header"]);
        })
    })
}

<select id="road">
</select>
<button id="button">Is it?</button>

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

3 个答案: