转换后通过selectAll进行D3过滤

时间:2016-07-08 10:07:04

标签: javascript d3.js filter transition selectall

我尝试构建一个交互式散点图。因此,我通过下拉列表将不同的颜色应用于我的数据:

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

我也可以通过radioboxes和这样的过渡来改变绘制的轴:

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);

}

什么工作正常:

  • 转换前的不同过滤器和颜色信息
  • 转换后保留不同的过滤器和颜色信息:第一个过滤器然后过渡(预期)

什么不起作用:

  • 之后选择轴和过滤器:首先过渡然后过滤!

非常感谢任何提示和帮助!

1 个答案:

答案 0 :(得分:1)

最后我明白了:

重要的是,即使在转换过程中,也要提及标记类:

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