我尝试构建一个交互式散点图。因此,我通过下拉列表将不同的颜色应用于我的数据:
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);
}
什么工作正常:
什么不起作用:
非常感谢任何提示和帮助!
答案 0 :(得分:1)
最后我明白了:
重要的是,即使在转换过程中,也要提及标记类:
circles.attr("class", "update")
.transition()
.duration(0)
.attr("cx", xMap)
.attr("cy", yMap)
.attr("class", "dot");