如何使用 D3 中的下拉菜单触发鼠标悬停事件？答案

【问题标题】：How can I trigger a mouseover event using a dropdown in D3?如何使用 D3 中的下拉菜单触发鼠标悬停事件？
【发布时间】：2014-05-14 16:54:02
【问题描述】：

我正在使用 D3.js 构建折线图，我希望用户能够使用下拉菜单突出显示其邮政编码的值。当用户将鼠标悬停在一条线上时，我已经通过鼠标悬停事件执行此操作。

我尝试设置 mouseover 和 mouseout 事件来调用“onmouseover”函数，如下所示：

series.selectAll(".hover")
 .on("mouseover", function(d,i) {
   d3.selectAll(".line")
     .style("opacity", 0.82)
     .filter(function(p) { return p.zipcode == d.zipcode; })
     .style("opacity", 1)
     .style("stroke-width", 2)
     .style("stroke", function(d,i) { return color2(i); });
   d3.selectAll(".series text")
     .style("opacity", 0)
     .filter(function(p) { return p.zipcode == d.zipcode; })
     .style("opacity", 1)
     .on("mouseover", onmouseover)
     .on("mouseout", onmouseout);

然后我还有我的“onmouseover”功能，该功能将由下拉菜单激活：

function onmouseover(d,i){
    d3.selectAll(".line")
      .style("opacity", 0.82)
      .filter(function(p) { return p.name == d.name; })
      .style("opacity", 1)
      .style("stroke-width", 2)
      .style("stroke", function(d,i) { return color2(i); })
     d3.selectAll(".series text")
      .style("opacity", 0)
      .filter(function(p) { return p.name == d.name; })
      .style("opacity", 1);}})

我在使用下拉菜单时尝试激活：

$("#dropdownselect").change(ziphandler)
   function ziphandler(){
   var key = $(this)
          .children(":selected")
          .val();
  onmouseover({id : key});
}

理想的结果是用户可以将鼠标悬停在一行上以查看新样式，还可以通过在下拉菜单中选择他们的邮政编码来突出显示一行。

编辑：代码可以在这里看到：http://bl.ocks.org/cminshew/31581ca3e55fbf67862a

【问题讨论】：

...您是说您拥有的代码不起作用？您需要以期望的格式将数据传递给 mouseover 函数，即{name: key}。
正确。它不工作。我已经用图表链接编辑了原始问题。如果我没有问正确的问题，我深表歉意。这是我第一次使用 D3 进行真正的工作。不过，我会努力正确格式化！
好吧，你没有包含 JQuery，为下拉列表选择了错误的 ID，在错误的范围内声明了处理函数，并使用了不存在的属性来选择行，但除此之外似乎工作：bl.ocks.org/larskotthoff/f6f9c5bcffd805441605
谢谢拉尔斯。我非常感谢这一点。我一定会仔细研究这一点，并避免将来出现这些错误。
太好了，我会添加这个作为参考答案。

标签： javascript jquery d3.js

【解决方案1】：

您的代码存在一些问题：

您没有包含 JQuery。
下拉选择器的 ID 是 zipselected 而不是 dropdownselect。
ziphandler 和onmouseover 函数在不同的范围内声明。特别是，您不能从ziphandler 调用onmouseover。
在您的onmouseover 函数中，您引用了一个不存在的.name 属性。

工作演示here。

【讨论】：

【解决方案2】：

我想你想打电话给$(this).onmouseover({id : key});

【讨论】：