Question

我正在尝试使用带有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，但为了证明概念，我们只是在较小的范围内实现了这一点。任何建议，将不胜感激。谢谢！

Answer 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 - 不是我一直非常懒惰，只是将改变事件指向了鼠标悬停功能（我为此目的进行了修改）展示这个概念，所以一切都被打破，但......）

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

1 个答案: