如何使用select/options淡入/出d3 force-layout的某些部分？

Question

我的场景是这样的：我有一个选项框和一个可爱的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) 
    } 
}); 

但是，这并不会淡入/淡出我的可视化对象的任何部分。 https://dl.dropbox.com/u/41566165/question/index.html

是否有任何人谁可以帮助：在某些部分就这样消失在一瞬间

预览（这是Firefox的最新版本，该代码实际上与铬& Safari浏览器的工作原理）？

Answer 1

你应该用适当的动画时间（以毫秒为单位）用内置的fadeIn/fadeOut代替你的transition（）。duration（500）.style（'opacity'，1）。

退房的jQuery FadeOut documentation

淡出示例：

$('.node:not("+cls+"), .link:not("+cls+")').fadeOut(900); 

衰落中是非常相似的淡出：

$('.node'+cls+', .link'+cls').fadeIn(900);