D3基於嵌套數據

Question

如何過濾菜單，我有以下普拉克 https://plnkr.co/edit/gDbUE99nNNMtYp9IpR1d?p=info和我在努力讓我的下拉菜單中使用嵌套數據的工作。 IVE生成的菜單從第一水平巢（「起點」），其示出了從第二電平巢（「納特」）產生的國籍的列表。我想用菜單加載與每個「起點」相關的不同'Nat'。

以前我創造了我這樣的菜單，但它似乎並沒有與「nested_data」合作。 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