javascript - d3js 删除元素的过渡

Question

我有一个 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);


            })
        ;

Answer 1

我不太了解您想要的功能，但我想我过去遇到过类似的问题。您应该使用 mouseenter 和 mouseexit 事件而不是 mouseover 和 mouseout，这将允许工具提示保留当光标位于图像元素内时可见。