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

首先，我认为您在变量名称为select 时输入了list。其次，您的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。