如何使用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);