[英]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. 我试图将下拉菜单与D3力布局图一起使用,以便当我从下拉菜单中选择一个选项时,相应的节点将突出显示,并且名称显示在该节点上方。 I am using jquery to get the value of the selected option and then want this option to match up with the correct node.
我正在使用jquery获取所选选项的值,然后希望此选项与正确的节点匹配。 Here is the jquery that I am currently using.
这是我当前正在使用的jQuery。 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:
我也做了一个jsfiddle,这是链接:
http://jsfiddle.net/ohiobucks23/xr3uE/ 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. 我正在制作一个更大的力布局图,除了A,B和C以外,还有更多的选择,但是为了概念验证的目的,只是使它在较小的范围内变得非常快。 Any suggestions would be appreciated.
任何建议,将不胜感激。 Thanks!
谢谢!
If you give your nodes an id you can just select them in the usual way, so something like: 如果为节点提供ID,则可以按照通常的方式选择它们,例如:
d3.select("#" + letter)
in your on change function. 在您的变更功能中。
You can also use d3 to create the dropdown menu, for instance: 您还可以使用d3创建下拉菜单,例如:
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 ...) 为了让您继续前进,我一直在研究您的小提琴,并将其碰到这里 -不是我很懒惰,只是将change事件指向mouseover函数(我为了演示这个概念而对之进行了修改,所以一切都坏了但是...)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.