使用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。