我有一个 SVG 图像(alpha),我想在鼠标悬停时显示一些控制选项组,并在鼠标移开时隐藏它们。
假设我在 x=100, y=100
中有图像 alpha。我的 svg 中有一个预定义的工具提示分类组,样式为“可见性”:“隐藏”。
我将样式更改为可见,并将其 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);
})
;
最佳答案
我不太了解您想要的功能,但我想我过去遇到过类似的问题。您应该使用 mouseenter
和 mouseexit
事件而不是 mouseover
和 mouseout
,这将允许工具提示保留当光标位于图像元素内时可见。
关于javascript - d3js 删除元素的过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33818177/