D3 转换后通过 selectAll 过滤
D3 Filter via selectAll after Transition
我尝试构建一个交互式散点图。因此,我通过这样的下拉菜单为我的数据应用不同的颜色:
function color_drop_update (select, checkbox) {
if (select == "gender") {
holder.selectAll(".dot").style("fill", colorf_gender);
holder.selectAll(".legend rect").style("fill", color_gender);
}
我还可以通过单选框和这样的过渡更改绘制的轴:
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);
}
什么工作正常:
- 过渡前的不同滤镜和颜色信息
- 过渡后保留不同的滤镜和颜色信息:先滤镜再过渡(预期)
什么不起作用:
- 之后选择轴和过滤器:先过渡再过滤!
非常感谢任何提示和帮助!
终于明白了:
重要的是,您再次提到标记 class,即使在转换中也是如此:
circles.attr("class", "update")
.transition()
.duration(0)
.attr("cx", xMap)
.attr("cy", yMap)
.attr("class", "dot");
我尝试构建一个交互式散点图。因此,我通过这样的下拉菜单为我的数据应用不同的颜色:
function color_drop_update (select, checkbox) {
if (select == "gender") {
holder.selectAll(".dot").style("fill", colorf_gender);
holder.selectAll(".legend rect").style("fill", color_gender);
}
我还可以通过单选框和这样的过渡更改绘制的轴:
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);
}
什么工作正常:
- 过渡前的不同滤镜和颜色信息
- 过渡后保留不同的滤镜和颜色信息:先滤镜再过渡(预期)
什么不起作用:
- 之后选择轴和过滤器:先过渡再过滤!
非常感谢任何提示和帮助!
终于明白了:
重要的是,您再次提到标记 class,即使在转换中也是如此:
circles.attr("class", "update")
.transition()
.duration(0)
.attr("cx", xMap)
.attr("cy", yMap)
.attr("class", "dot");