如何使用D3中的下拉菜單觸發鼠標懸停事件？

我正在使用D3.js構建折線圖，我希望用戶能夠使用下拉菜單突出顯示其Zip Code的值。當用戶將鼠標懸停在一行上時，我已經在使用鼠標懸停事件進行此操作。如何使用D3中的下拉菜單觸發鼠標懸停事件？

我試過設置鼠標懸停及移出事件調用「的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

來源

2014-05-14 cminshew

...你在說你的代碼不起作用？您需要將數據以預期的格式傳遞給mouseover函數，即'{name：key}'。 –

正確。它不工作。我用鏈接到圖表編輯了原始問題。如果我沒有問正確的問題，我很抱歉。這是我第一次與D3合作。儘管如此，我會盡量正確地處理格式化問題！ – cminshew

那麼，你沒有包含JQuery，爲下拉列表選擇了錯誤的ID，在錯誤的作用域中聲明瞭處理函數，並使用了一個不存在的屬性來選擇該行，但除此之外它似乎工作：http：/ /bl.ocks.org/larskotthoff/f6f9c5bcffd805441605 –

有你的代碼的幾個問題：

你沒有包括JQuery。
下拉選擇器的ID是zipselected而不是dropdownselect。
ziphandler和onmouseover函數在不同的作用域中聲明。特別是，您不能從ziphandler撥打onmouseover。
在您的onmouseover函數中，您引用了一個不存在的.name屬性。

工作演示here。

來源

2014-05-14 19:00:58

我想你想打電話給$(this).onmouseover({id : key});

來源

2014-05-14 17:18:18

如何使用D3中的下拉菜單觸發鼠標懸停事件？

回答

相關問題