我的情况是这样的:我有一个带有选项的选择框和一个漂亮的D3力布局可视化效果。
我想使用这些选项淡入/淡出可视化的某些部分。我正在针对这种特殊情况使用jQuery,例如:
$("select.filter.tag").change(function() {
var cls = "."+$(this).val();
if(cls != "."){
d3.selectAll(".node:not("+cls+"), .link:not("+cls+")").transition()
.duration(500)
.style("opacity", 0);
d3.selectAll(".node"+cls+", .link"+cls).transition()
.duration(500)
.style("opacity", 1);
}
else{
d3.selectAll(".node, .link").transition()
.duration(500)
.style("opacity", 1)
}
});
但是,这不会淡入/淡出我的可视化的任何部分。某些部分很快就会消失(这是在最新版本的Firefox中,该代码实际上适用于Chrome和Safari)
预览:https://dl.dropbox.com/u/41566165/question/index.html
有谁可以帮忙吗?
最佳答案
您应该将transition()。duration(500).style('opacity',1)替换为jQuery内置的fadeIn / fadeOut,并以毫秒为单位设置适当的动画时间。
查看jQuery FadeOut documentation
淡出示例:
$('.node:not("+cls+"), .link:not("+cls+")').fadeOut(900);
淡入与淡出非常相似:
$('.node'+cls+', .link'+cls').fadeIn(900);