javascript - D3 onclick、onmouseover 和 mouseout 行为覆盖

Question

我有一个 D3 多线图，它使用 onclick mouseover 和 mouseout 事件的图例。单击图例将隐藏该线。将鼠标悬停在图例上将使线条变粗，将鼠标移开将使线条恢复正常。

问题是，如果我单击图例，然后在 D3 过渡完成之前移除鼠标，过渡将无法完成。如果我将鼠标悬停在图例上足够长的时间以进行过渡，一切都会正常工作。

要进行测试，请单击图例矩形并快速将鼠标移出 - 该线不会消失。

在这里摆弄:https://jsfiddle.net/goodspeedj/5ewLxpre/

鼠标事件的代码如下:

.on("click", function(d) {

    var selectedPath = svg.select("path." + d.key);
    //var totalLength = selectedPath.node().getTotalLength();

    if (d.visible === 1) {
        d.visible = 0;
    } else {
        d.visible = 1;
    }

    rescaleY();
    updateLines();
    updateCircles();

    svg.select("rect." + d.key).transition().duration(500)
        .attr("fill", function(d) {
            if (d.visible === 1) {
                return color(d.key);
            } else {
                return "white";
            }
        })

    svg.select("path." + d.key).transition().duration(500)
        .delay(150)
        .style("display", function(d) {
            if(d.visible === 1) {
                return "inline";
            }
            else return "none";
        })
        .attr("d", function(d) {
            return line(d.values);
        });

    svg.selectAll("circle." + d.key).transition().duration(500)
        //.delay(function(d, i) { return i * 10; })
        .style("display", function(a) {
            if(d.visible === 1) {
                return "inline";
            }
            else return "none";
        });


})
.on("mouseover", function(d) {
    d3.select(this)
        .attr("height", 12)
        .attr("width", 27)

    d3.select("path." + d.key).transition().duration(200)
        .style("stroke-width", "4px");

    d3.selectAll("circle." + d.key).transition().duration(200)
        .attr("r", function(d, i) { return 4 })

    // Fade out the other lines
    var otherlines = $(".line").not("path." + d.key);
    d3.selectAll(otherlines).transition().duration(200)
        .style("opacity", 0.3)
        .style("stroke-width", 1.5)
        .style("stroke", "gray");

    var othercircles = $("circle").not("circle." + d.key);
    d3.selectAll(othercircles).transition().duration(200)
       .style("opacity", 0.3)
       .style("stroke", "gray");
})
.on("mouseout", function(d) {
    d3.select(this)
        .attr("height", 10)
        .attr("width", 25)

    d3.select("path." + d.key).transition().duration(200)
        .style("stroke-width", "1.5px");

    d3.selectAll("circle." + d.key).transition().duration(200)
        .attr("r", function(d, i) { return 2 })

    // Make the other lines normal again
    var otherlines = $('.line').not("path." + d.key);
    d3.selectAll(otherlines).transition().duration(100)
        .style("opacity", 1)
        .style("stroke-width", 1.5)
        .style("stroke", function(d) { return color(d.key); });

    var othercircles = $("circle").not("circle." + d.key);
    d3.selectAll(othercircles).transition().duration(200)
        .style("opacity", 1)
        .style("stroke", function(d) { return color(dimKey(d)); });
});

提前致谢。

Answer 1

您可以在单击 (.clicked) 时为图例分配一个类，然后在转换完成后调用 setTimeout 并适当延迟以删除该类。

当鼠标悬停或鼠标移出时，首先检查图例是否具有 .clicked 类。如果是这样，请按照其他答案中的建议设置一些延迟值，否则，请立即继续。与其他答案相比，这样做的优点是只有在需要时才会出现延迟。

编辑

如果您的图例具有类“.legend”，请按如下方式修改您的代码:

.on("click", function(d) {

    // Add .clicked class to the legend
    $('.legend').addClass('clicked');

    // remove clicked class after 750ms. Your duration is 500ms,
    // so I'm padding it a bit although you can adjust this as needed
    setTimeout(function () { $('.legend').removeClass('clicked') }, 750);

    ... rest of your function
})
.on("mouseover", function(d) {

    // check if legend has been clicked recently and change delay if so
    var transitionDelay = 0;
    if($('.legend').hasClass('clicked')) transitionDelay = 750;

    // your function

    d3.select(this)
        .attr("height", 12)
        .attr("width", 27)

    d3.select("path." + d.key).transition().delay(transitionDelay).duration(200)
        .style("stroke-width", "1.5px");

    ... rest of your function
});