Question

我有一个多线图表，允许用户点击图例来隐藏/显示不同的线条。发生这种情况时，会重新计算Y轴，并且线条也会根据新的最大y轴值更新。

除了一个我无法弄清楚的bug之外，这个工作正常。如果取消选择最顶行和另一行（2个取消选择的行），然后重新启用最顶行，则圆圈仅在转换过程中移动。启用第二行似乎完成了它们，然后圆圈最终到达应有的位置。

这是一个小提琴：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)); });
});

重现：

取消选择PFOS（红色）
取消选择PFBA（蓝色）
再次启用PFOS（红色）。圆圈不与线对齐。
再次启用PFBA（蓝色）。圆圈完成并结束它们应该在哪里

Answer 1

问题是一个转变正在取消另一个转变。即updateLines过渡功能在所有行上运行时。

您正在点击功能中的点击的行上运行另一个转换：

 svg.select("path." + d.key).transition().duration(500)
                        .delay(150)...

因此，一种方法是运行一个转换，转换完成后运行另一个转换。

其他方法是在updateCircle和updateLines

中不进行转换

工作代码here（使用方法2）

D3过渡未完成

1 个答案: