d3鼠標懸停事件不會觸發如果我將svg附加到div

我試圖讓一個簡單的鼠標懸停工作在d3中的某些矩形上。如果我將SVG附加到「body」，那麼一切正常（第一行代碼）。如果我將選擇更改爲「.chart1」而不是「body」，則鼠標懸停不起作用。有沒有人見過這個？d3鼠標懸停事件不會觸發如果我將svg附加到div

var chart = d3.select(".chart1").append("svg") 
    .attr("width", 250) 
    .attr("height", 50); 

data = ["a", "b", "c",] 

for(var i = 0; i < data.length; i++){ 
      var rect = chart.append("rect") 
       .attr("x", 20*i) 
       .attr("y", 10) 
       .attr("width", 15) 
       .attr("height", 15) 

chart.selectAll('rect') 
    .on("mouseover", function() { 
     d3.select(this) 
      .attr("opacity", .5) 
    }) 
    .on("mouseout", function() { 
     d3.select(this) 
      .attr("opacity", 1) 
    });

的jsfiddle：https://jsfiddle.net/jasonleehodges/um5f5ysv/

來源

2017-08-02 jasonleehodges

它的工作：https://jsfiddle.net/gerardofurtado/8s6nhxhz/ –

與您的問題無關，但您不需要使用for循環在D3代碼中追加元素。這不是慣用的D3。 –

是的，不知道我的堆棧中是否存在某種類型的碰撞，但它不在我的jsfiddle中工作：https://jsfiddle.net/jasonleehodges/um5f5ysv/ – jasonleehodges

的問題是不是因爲你追加SVG身體或分度.chart1類

的鼠標懸停不工作的問題在這裏。

var chart = d3.select(".chart1").append("svg") 
    .attr("width", 250) 
    .attr("height", 50) 
    //.style("pointer-events", "none");//WHY DISABLE MOUSE EVENT ON SVG

修復將刪除.style("pointer-events", "none"); ，它會在所有的情況下工作，沒有任何異常。

工作代碼here

在另一方面，你不應該使用一個for循環，以及這不是D3的方式（如通過把弗塔@Gerardo）。

使你的代碼for：

for(var i = 0; i < data.length; i++){ 
      var rect = chart.append("rect") 
       .attr("x", 20*i) 
       .attr("y", 10) 
       .attr("width", 15) 
       .attr("height", 15)

而應該是

var rect = chart.selectAll("rect").data(data).enter().append("rect") 
       .attr("x", function(d,i){return 20*i}) 
       .attr("y", 10) 
       .attr("width", 15) 
       .attr("height", 15) 
       .attr("fill", "#cc004c") 
       .attr("title","NBC") 
       .attr("data-toggle","tooltip")

工作代碼here

來源

2017-08-02 04:35:52 Cyril

我在試圖解決問題的努力中添加了該樣式行。如果我將它從小提琴中移除，它可以解決小提琴問題，但如果我刪除該線，我的製作應用程序仍然無法解決。如果我改變它附加到身體它雖然工作。不知道爲什麼身體和div有區別。 – jasonleehodges

絕對是與風格有關的，在這種情況下。在你提供的小提琴中，我可以看到指針事件的問題。 – Cyril

感謝您的幫助。正是這種風格 - 直接位於d3對象下方的引導行被移動了25px並覆蓋了d3（即使該行中沒有任何內容），所以它可能隱藏了mouseover事件中的d3。 – jasonleehodges

d3鼠標懸停事件不會觸發如果我將svg附加到div

回答

相關問題