D3.js D3如何基于嵌套数据筛选菜单

我有以下几点 我正在努力让我的下拉菜单处理嵌套数据。我从一级嵌套（“起点”）生成了一个菜单，其中显示了从二级嵌套（“Nat”）生成的国籍列表。我想使用菜单加载与每个“起点”关联的不同“Nat”

以前我是这样创建菜单的，但它似乎不能处理“嵌套的_数据”。d3.filter（）对此错误吗

list.on('change', function() {
      var selected = d3.select(this).select("select").property("value")
      var cd = nested_data.filter(function(d) {
           return (selected == d.key)
      });
   updateNested_data(cd)
  });

...

var filter = nested_data.filter(function(d) {
       return ("Berkner Island" == d.key)
   });
  updateNested_data(filter)

我的更新函数中的exit（）也有问题，我想是因为我绑定数据太早了吧？但是对于这个问题，我想集中讨论如何让菜单工作

完整代码

d3.csv("data.csv", function(CSV) {

  var nested_data = d3.nest()
      .key(function(d) {
      return d['starting point'];
      })
      .key(function(d) {
      return d.Nat;
      })
      .entries(CSV);

  // CREATE DROPDOWN
  var list = d3.select("#opts")

  list.append("select").selectAll("option")
      .data(nested_data)
      .enter().append("option")
      .attr("value", function(d) {
         return d.key;
      })
      .text(function(d) {
         return d.key;
      });

  // MENU
  list.on('change', function() {
      var selected = d3.select(this).select("select").property("value")
      var cd = nested_data.filter(function(d) {
           return (selected == d.key)
      });
   updateNested_data(cd)
  });

  // CONFIG
  var canvas = d3.select('#explorers').data(nested_data)

  // BIND, ENTER, REMOVE
  function updateNested_data(nested_data) {

      var country = canvas.selectAll(".country")

      var countryEnter = country
        .data(function(d) {
           return d.values
        })
        .enter().append('div')
        .attr('class', 'country')

      countryEnter
        .append("p")
        .attr('class', 'label')
        .style('font-weight', 'bold')
        .text(function(d) {
            return d.key;
        })

      country.exit().remove();

  };

   //FILTER
   var filter = nested_data.filter(function(d) {
       return ("Berkner Island" == d.key)
   });

   // UPDATE
  updateNested_data(filter)

});

---

除了您进出的方式外，任何地方都没有问题：

function updateNested_data(cd) {
      //set the data to the selection
      var country = canvas.selectAll(".country").data(cd.values)

      var countryEnter = country

          .enter().append('div')
          .attr('class', 'country')

      countryEnter
            .append("p")
            .attr('class', 'label')
            .style('font-weight', 'bold')
            .text(function(d) {
                return d.key;
            })
      //exit on selection
      country.exit().remove();

  };

---

工作代码

魔术师！.pop（）在这个上下文中做了什么？我只是取数组中的第一个元素。pop（）将取最后一个元素我已经改变了进出的方式，但它不起作用。在plunk中使用.pop（），它可以工作，但是如果我不想去掉最后一个元素，该怎么办？