从 D3js 下拉列表中删除重复项

Remove Duplicates from D3js Dropdown

本文关键字：删除 D3js 下拉列表      更新时间：2023-09-26

我能够纯粹使用 D3.js 创建数据并将其加载到 Select 元素（Dropdown）中。我遇到的主要问题是在下拉列表中我看到了所有名称（重复项）。我只想看到不同的名称。这是一个工作示例：http://jsfiddle.net/khnumtemu/43oaczq8/

 var dataset = [
   {
      "SalesRepName":"KIM MIKE (110)",
      "FieldSalesManagerName":"MILLER BRIAN"
   },
   {
      "SalesRepName":"JAISWAL LOKESH (111)",
      "FieldSalesManagerName":"MILLER BRIAN"
   },
   {
      "SalesRepName":"QUINTERN GEOFFREY (112)",
      "FieldSalesManagerName":"MILLER BRIAN"
   },
   {
      "SalesRepName":"OKOYE MAXIMUS (114)",
      "FieldSalesManagerName":"MILLER BRIAN"
   },
   {
      "SalesRepName":"STARGHILL TREVOR (115)",
      "FieldSalesManagerName":"OPEN POSITION"
   },
   {
      "SalesRepName":"JARDOT BENJAMIN (318)",
      "FieldSalesManagerName":"MILLER BRIAN"
   },
   {
      "SalesRepName":"MICCICHE TERRY (319)",
      "FieldSalesManagerName":"MILLER BRIAN",
   },
   {
      "SalesRepName":"KAMENOVA TEODORA (401)",
      "FieldSalesManagerName":"OPEN POSITION"
   },
   {
      "SalesRepName":"SHERIDAN BRIAN (402)",
      "FieldSalesManagerName":"OPEN POSITION"
   },
   {
      "SalesRepName":"KNEIP CHARLES (403)",
      "FieldSalesManagerName":"OPEN POSITION"
   }
]

d3.select("body").append("select")
    .classed('colorSelect',true)
    .selectAll("option")
    .data(dataset)
    .enter()
    .append("option")
    .attr("value",function(d){ return d.FieldSalesManagerName;})
    .text(function(d){ return d.FieldSalesManagerName;})
    .sort(function(a, b) {return d3.ascending(a.FieldSalesManagerName, b.FieldSalesManagerName);});

  // Data OnLoad
  d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")

  // Data Updated on Selected Change
  d3.select("select")
    .on("change", function(d){
      var sel = d3.select(".colorSelect").node().value;
      d3.select("body").selectAll("p")
        .data(dataset)
        .text(function(d){
          if(d.FieldSalesManagerName === sel){
            return d.SalesRepName;
          }
        })
    });

由于数据重复如此之多，您的代码迫切需要更好的数据结构。 既然你用的是d3，我先把它强行放到地图上。

var map = d3.map();
dataset.forEach(function(d){
    if (!map.has(d.FieldSalesManagerName)){
        map.set(d.FieldSalesManagerName, [d.SalesRepName])
    } else {
        map.get(d.FieldSalesManagerName).push(d.SalesRepName);
    }
});

然后，您的下拉菜单将变为：

d3.select("body").append("select")
 .classed('colorSelect',true)
 .selectAll("option")
 .data(map.keys())
 .enter()
 .append("option")
 .attr("value",function(d){ return d;})
 .text(function(d){ return d; });

然后，您的on更改可以避免循环和比较：

d3.select("select")
  .on("change", function(d){      
    var sel = d3.select(".colorSelect").node().value;
    d3.select("body").selectAll("p")
      .data(map.get(sel))
      .text(function(d){
        return d;
      })        
  });

更新的小提琴。

相关文章：