Question

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

我尝试过设置mouseover和mouseout事件来调用＆＃34; onmouseover＆＃34;功能如下所示：

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

然后我还有我的＆＃34; onmouseover＆＃34;要通过下拉列表激活的功能：

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函数在不同的范围内声明。特别是，您无法从onmouseover。

ziphandler

在onmouseover函数中，您引用的.name属性不存在。

工作演示here。

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

2 个答案: