CODEWITHSUNDEEP
javascriptjqueryhtmld3.jsforce-layout
nocodaoh.2013
nocodaoh.2013

Reputation: 171

Using Drop-down menu with D3 force layout graph

I am trying to use a drop down menu with a D3 force layout graph so that when I select an option from the drop down menu, the corresponding node becomes highlighted and the name appears above the node. I am using jquery to get the value of the selected option and then want this option to match up with the correct node. Here is the jquery that I am currently using. I know I will probably have to add on to this but am not sure where to go next:

$(document).ready(function(){
       $('.letters').on('change',function(){
              cur_name = $('.letters').val();
              alert('The selected name is ' + cur_name);
                                            }); 
                              });

The alert is just for testing purposes. I have also made a jsfiddle and here is the link:

http://jsfiddle.net/ohiobucks23/xr3uE/

I am making a much larger force layout graph with a lot more options than just A, B, and C but just made this on a smaller scale really quick for proof of concept purposes. Any suggestions would be appreciated. Thanks!

Upvotes: 1

Views: 1153

Answers (1)

user1614080
user1614080

Reputation: 2874

If you give your nodes an id you can just select them in the usual way, so something like:

d3.select("#" + letter)

in your on change function.

You can also use d3 to create the dropdown menu, for instance:

var select = d3.select("body").append("select")
        .attr("id", "selecter")
        .on("change", mouseover);

var options = select.selectAll("option")
        .data(l);

options.enter()
        .append("option")
        .attr("value", function(d, i) {
            return d;
        })
        .text(function(d, i) {
            return d;
        });

Which was taken from this question. This question might also help.

And to get you going I've hacked about with your fiddle and bumped it to here - not I've been very lazy and just pointed the change event to the mouseover function (which I amended for the purposes of demonstrating the concept so everything is broken but ...)

Upvotes: 1

Related Questions