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