Creating a dropdown/select list from csv with d3 nest

Question

I am looking to create a dropdown/select list from a .csv file. Is it possible to create a dropdown/select list from d3 nest? I'm working on a force directed graph that is being populated from a .csv file. I would like for the user to be able to choose from the dropdown list which node it wants to highlight. Previously I used a text search based and it worked, but I am actually looking for a dropdown list instead of text based search. Thank you in advance!

You can refer to 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;

I used the les_mis.csv

P.s: I am not even sure if I had setup the jsfiddle appropriately. Excuse my noobness.

Mark · Accepted Answer · 2015-10-13 13:12:16Z

1

First, I think you typed list when the variable name is select. Second, your nodesmap object does not have properties of .key.

This will work though:

  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

  ...

Full working code here.

answered Oct 13, 2015 at 13:12

Mark

109k20 gold badges180 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

R. Iskandar Over a year ago

Thank you for your kind response. I will give it a go and let you know any updates. Truly grateful to be getting help on this matter..

R. Iskandar Over a year ago

This works brilliantly. Thanks Mark! Your explanation is very good and straight forward. You were spot on using "graph.nodes" rather than "nodesmap". Initially I was using "graph.nodes" but somehow or rather it didn't work and then I started blast aimlessly due through frustration. I learned something new to with "this.options[this.selectedIndex].value". I've not encountered this before as I actually have left "coding/programming" for about 10 years now. Anyway, really appreciate it!

Collectives™ on Stack Overflow

Creating a dropdown/select list from csv with d3 nest

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related