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

Question

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

我尝试设置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

Answer 1

我认为您想致电$(this).onmouseover({id : key});

Answer 2

您的代码存在一些问题：

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

在这里工作演示。