使用带有 D3 力布局图的下拉菜单答案

【问题标题】：Using Drop-down menu with D3 force layout graph使用带有 D3 力布局图的下拉菜单
【发布时间】：2014-08-28 06:22:42
【问题描述】：

我正在尝试使用带有 D3 强制布局图的下拉菜单，以便当我从下拉菜单中选择一个选项时，相应的节点会突出显示，并且名称会显示在节点上方。我正在使用 jquery 来获取所选选项的值，然后希望此选项与正确的节点匹配。这是我目前正在使用的 jquery。我知道我可能需要补充这一点，但不确定下一步该去哪里：

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

警报仅用于测试目的。我还做了一个 jsfiddle，这是链接：

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

我正在制作一个更大的力布局图，其中包含比 A、B 和 C 更多的选项，但只是为了概念证明的目的而在较小的规模上非常快速地制作。任何建议，将不胜感激。谢谢！

【问题讨论】：

标签： javascript jquery html d3.js force-layout

【解决方案1】：

如果你给你的节点一个 id，你可以像往常一样选择它们，比如：

d3.select("#" + letter)

在您的更改功能中。

你也可以使用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;
        });

取自this 问题。 This 问题也可能有帮助。

为了让你继续前进，我已经用你的小提琴破解了它并将它撞到here - 不是我一直很懒，只是将更改事件指向鼠标悬停函数（我为了演示而修改了它这个概念所以一切都被打破了但是......）

【讨论】：