D3 transition not completing

Question

I have a multiline chart that allows a user to click on the legend to hide/show different lines. As this happens the Y axis is re-calculated and the lines also update based on the new max y axis value.

This works fine except for one bug I can't figure out. If you deselect the topmost line and another line (2 deselected lines) and then re-enable the topmost line the circles only move part way through the transition. Enabling the second line seems to finish them and the circles then end up where they should be.

Here is a fiddle: 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)); });
});

To reproduce:

1. Deselect PFOS (red)
2. Deselect PFBA (blue)
3. Enable PFOS (red) again. The circles do not line up with the line.
4. Enable PFBA (blue) again. The circles complete and end up where they should be

Answer 1

The problem is one transition is cancelling the other transition. i.e when updateLines transition function is running on all lines.

You are running another transition on the clicked line inside the click function:

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

So one approach would be to run one transition and on transition complete run the other.

Other approach would be to not have transition in updateCircle and updateLines

working code here (using approach 2)