Dots on subsequent line charts do not show up

[ndarville]

svg.selectAll(".dot")
    .data(data)
    .enter().append("circle")
        .attr({
            "class": "dot",
            "r": 3,
            "cx": lineAlpha.x(),
            "cy": lineAlpha.y(),
            "stroke": AlphaColor
        });
svg.selectAll(".dot")
    .data(data)
    .enter().append("circle")
        .attr({
            "class": "dot",
            "r": 3,
            "cx": lineBeta.x(),
            "cy": lineBeta.y(),
            "stroke": BetaColor
        });

In this case, the second series of dots will not appear on lineBeta. The first works fine, though.

[ndarville]

The reason is the second use of selectAll, which undoes the former elements. Now to find out the best way of going about things.

[ndarville]

Look at the code for the line charts and try to apply the same to the dots.

[ndarville]

Whoop!

var dots = svg.selectAll("circle")
    .data(data)
    .enter();

var dotsLeft = dots.append("circle")
    .attr({
        "class": "dot",
        "r": 3,
        "cx": lineLeft.x(),
        "cy": lineLeft.y(),
        "stroke": coalitionLeftColor
    });
var dotsRight = dots.append("circle")
    .attr({
        "class": "dot",
        "r": 3,
        "cx": lineRight.x(),
        "cy": lineRight.y(),
        "stroke": coalitionRightColor
    });