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

有没有人可以提供帮助？

Answer 1

你应该用jQuery内置的fadeIn / fadeOut替换你的过渡（）。duration（500）.style（'opacity'，1），并以适当的动画时间为单位。

查看jQuery FadeOut documentation

淡出示例：

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

淡入非常类似于淡出：

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

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

1 个答案: