使用d3嵌套從csv創建下拉/選擇列表

Question

我期待從.csv文件創建dropdown/select list。是否有可能從d3 nest創建一個dropdown/select列表？我正在研究一個正在從.csv文件填充的強制定向圖。我希望用戶能夠從下拉列表中選擇要突出顯示的節點。以前，我使用了基於文本的搜索，它工作正常，但我實際上正在尋找dropdown list而不是基於文本的搜索。先謝謝你！

你可以參考this link

var nodesmap = d3.nest() 
    .key(function (d) { return d.name; }) 
    .rollup(function (d) { return { "name": d[0].name, "group": d[0].group, "size": d[0].size }; }) 
    .map(graph.nodes);  

var output = document.createElement('block_container'); 
var select = d3.select("#searchName").append("select"); 

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

return output; 

我用les_mis.csv

P.S：我甚至不知道我是否有安裝了jsfiddle適當。不好意思。

Answer 1

首先，我想你輸入list當變量名是select。其次，您的nodesmap對象不具有.key的屬性。

這會的工作，雖然：

var select = d3.select("#searchName") 
    .append("select") 
    .on('change', searchNode); //<-- fire your search function on change 

    select.selectAll("option") 
    .data(graph.nodes) //<-- use graph.nodes 
    .enter() 
    .append("option") 
    .attr("value", function(d) {return d.name;}) //<-- it has a name property 
    .text(function(d) { 
     return d.name; 
    }); 

function searchNode() { 

    //find the node 
    var selectedVal = this.options[this.selectedIndex].value; //<-- get value from dropdown 

    ... 

全部工作代碼here。