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

Question

I am building a line chart using D3.js and I want users to be able to use a drop down menu to highlight values for their Zip Code. I am already doing this with a mouseover event when a user hovers over a line.

I've tried setting mouseover and mouseout events to call an "onmouseover" function as seen here:

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);

I then also have my "onmouseover" function that is to be activated by the dropdown:

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);}})        

Which I try to activate when using a dropdown menu:

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

The ideal outcome is that a user can hover over a line to see the new style and also highlight a line by selecting their Zip Code in a dropdown menu.

EDIT: The code is here to see in action: http://bl.ocks.org/cminshew/31581ca3e55fbf67862a

Answer 1

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

Answer 2

There are a few problems with your code:

• You didn't include JQuery.
• The ID of the dropdown selector is zipselected and not dropdownselect .
• The ziphandler and onmouseover functions are declared in different scopes. In particular, you can't call onmouseover from ziphandler .
• In your onmouseover function, you are referencing a .name attribute, which does not exists.

Working demo here .