0
我有一個SVG圖像（alpha），我想在鼠標懸停上顯示一些控件選項組，並將它們隱藏在鼠標上。d3js刪除元素的轉換
比方說，我在x=100, y=100有圖像阿爾法。我在我的svg中有一個預定義的工具提示分類組，其樣式爲'visibility'：'隱藏'。 我將樣式更改爲可見，並將其x，y座標設置爲alpha.attr('x')-20,alpha.attr('y')-20。以便它出現在圖像的左上角。但是當我從圖像中移出時，該組隱藏自身，爲了解決這個問題，我延遲了setTimeOut()函數。但是，當我將鼠標移到控件組上時，由於延遲，它將其樣式更改爲隱藏。
我嘗試過使用d3.transition，但我無法弄清楚如何將鼠標懸停在控件組上時將其刪除。
我不知道如何克服這個問題並達到我的要求。誰能幫我？
d3.select('#svg')
.append('g')
.attr('id', 'playground')
.append('image')
.attr('class', 'tooltip')
.attr('width', 20)
.attr('height', 20)
.attr('x', 0)
.attr('y', 0)
.attr('xlink:href', base_url + '/assets/svg/api_lbs_color.svg')
.style('visibility', 'hidden')
.on('mouseover', function() {
d3.select(this).style('visibility','visible');
})
.on('mouseout', function() {
d3.select(this).style('visibility','hidden');
});
playGround
.append('image')
.attr('width', 32)
.attr('height', 32)
.attr('x', d3.mouse(this)[0])
.attr('y', d3.mouse(this)[1])
.attr('xlink:href', curr.attr('xlink:href'))
.on("mouseover", function(d) { // the mouseover event
console.log('mouse over playgrround operator');
var curr = d3.select(this);
d3.select('.tooltip')
.attr('x', curr.attr('x') - 20)
.attr('y', curr.attr('y') - 20)
.style('visibility', 'visible')
;
})
.on('mouseout', function() {
setTimeout(function() {
d3.select('.tooltip')
.style('visibility', 'hidden')
}, 1000);
})
;