javascript - 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)
  }
});

ただし、これは視覚化のどの部分もフェードイン/フェードアウトしません。特定の部分が一瞬で消えます (これは Firefox の最新バージョンであり、コードは実際には Chrome と Safari で動作します)

プレビュー: https://dl.dropbox.com/u/41566165/question/index.html

助けてくれる人はいますか？