如何在鼠標懸停在工具提示上時保持d3鼠標懸停狀態？

我有一個d3 scatterplot。我有一個工具提示，當我將鼠標懸停在某個點上時顯示。我想做兩件事。如何在鼠標懸停在工具提示上時保持d3鼠標懸停狀態？

1）我希望鼠標懸停，只要我的鼠標在點或工具提示上。 2）我想在工具提示中添加一個可點擊的鏈接。爲了完成這項工作，我相信＃1是必需的。

我該怎麼做？

這裏是我的代碼： https://github.com/laran/eisenhower/blob/master/components/plot/scatterplot.js

2015-02-24 Laran Evans

大概沒有簡單的方法來做到這一點。

一種選擇是巢作爲圓相同的容器內的工具提示（即，SVG <g>），而將鼠標事件到該父，使得當鼠標工具提示和圓之間也不會觸發鼠標移開。這將使轉換圓圈之間的工具提示變得困難，因爲它會涉及將其從父母分離並附着到另一父母。

也許更簡單的選擇是將mouseover和mouseout事件附加到工具提示，並設置一個標誌（如isOverTooltip = true或false）以跟蹤鼠標的位置。然後在圈出的鼠標中檢查此標誌以確定是否隱藏工具提示。在這種情況下，爲了讓鼠標能夠在圓圈和工具提示之間移動而不會導致工具提示消失，您需要在setTimeout（當然僅在!isOverTooltip）內隱藏工具提示。

來源

2015-02-24 20:13:17 meetamit

奧普斯，沒有意識到我在我的答案中撕掉了你的想法！ – Mark 2015-02-24 21:05:39

一個想法可能是在圓形的鼠標移出時創建延遲轉換，以允許用戶有時間將鼠標指向工具提示。如果將鼠標懸停在時間上一圈，你取消的過渡和隱藏工具提示上提示的div的mouseout：

// create tooltip 
var tip = d3.select('body') 
    .append('div') 
    .attr('class', 'tip') 
    .html('I am a tooltip...') 
    .style('border', '1px solid steelblue') 
    .style('padding', '5px') 
    .style('position', 'absolute') 
    .style('display', 'none') 
    .on('mouseover', function(d, i) { 
    tip.transition().duration(0); // on mouse over cancel circle mouse out transistion 
    }) 
    .on('mouseout', function(d, i) { 
    tip.style('display', 'none'); // on mouseout hide tip 
    }); 

... 

// mouseover and out of circle 
.on('mouseover', function(d, i) { 
    tip.transition().duration(0); // cancel any pending transition 
    tip.style('top', y(d.y) - 20 + 'px'); 
    tip.style('left', x(d.x) + 'px'); 
    tip.style('display', 'block'); 
    }) 
    .on('mouseout', function(d, i) { 
    tip.transition() 
    .delay(500) 
    .style('display', 'none'); // give user 500ms to move to tooltip 
    });

這裏有一個快速example。

來源

2015-02-24 20:43:01 Mark

如何在鼠標懸停在工具提示上時保持d3鼠標懸停狀態？

回答

相關問題