如何使用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屬性，該屬性不存在。

在這里工作演示。