Question

我有以下插件 https://plnkr.co/edit/gDbUE99nNNMtYp9IpR1d?p=info我正努力让我的下拉菜单使用嵌套数据。我已经从第一级嵌套（＆＃39;起点＆＃39;）生成了一个菜单，其中显示了从第二级嵌套生成的国籍列表（＆＃39; Nat＆＃39;）。我想用菜单加载不同的“Nat”＃。与每个起点相关联。

之前我创建了这样的菜单，但似乎并没有使用＆nbsp;嵌套数据＆＃39;。 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)

});

Answer 1

除了您进入和退出的方式以外，没有任何问题：

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();

  };

工作代码here

D3如何根据嵌套数据过滤菜单

1 个答案: