D3 Filter via selectAll after Transition

Question

I try to build an interactive scatterplot. Therefore I am applying different colors to my data via dropdown like this:

    function color_drop_update (select, checkbox) {
    if (select == "gender") {
        holder.selectAll(".dot").style("fill", colorf_gender);
        holder.selectAll(".legend rect").style("fill", color_gender);
    }

I can also change the plotted axes via radioboxes and a transition like this:

function transition(dimension)  {
    if (dimension == "pca") {
        var xMap = xMap_pca;
        var yMap = yMap_pca;

        xScale.domain([d3.min(data, xValue_pca)-1, d3.max(data, xValue_pca)+1]);
        yScale.domain([d3.min(data, yValue_pca)-1, d3.max(data, yValue_pca)+1]);
    }
    else if (dimension == "tsne") {
        var xMap = xMap_tsne;
        var yMap = yMap_tsne;

        xScale.domain([d3.min(data, xValue_tsne)-1, d3.max(data, xValue_tsne)+1]);
        yScale.domain([d3.min(data, yValue_tsne)-1, d3.max(data, yValue_tsne)+1]);
    }

    // Update old
    circles.attr("class", "update")
        .transition()
            .duration(0)
            .attr("cx", xMap)
            .attr("cy", yMap);

    //Update Axis
    holder.select(".xaxis")
        .transition()
            .duration(0)
        .call(xAxis);  
    holder.select(".yaxis")
        .transition()
            .duration(0)
        .call(yAxis);

}

What is working fine:

Different filters and color information before transition
Different filters and color information are kept after the transition: first filter then transition (intended)

What is NOT working:

Choose axis and filter afterwards: first transition then filter!

Would really appreciate any hints and help!

score 2 · Accepted Answer · answered Jul 18 '16 at 07:33

Finally I got it:

it is important, that you mention the markers class even in the transition one again:

        circles.attr("class", "update")
        .transition()
            .duration(0)
            .attr("cx", xMap)
            .attr("cy", yMap)
            .attr("class", "dot");

D3 Filter via selectAll after Transition

1 Answers1