Как постепенно увеличивать/уменьшать определенные части силового макета d3 с помощью выбора/опций?

Мой сценарий таков: у меня есть поле выбора с параметрами и прекрасная визуализация силового макета 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

Есть ли кто-нибудь, кто может помочь?


javascript jquery d3.js highlight force-layout
person Biketire    schedule 23.10.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны заменить свой transition().duration(500).style('opacity', 1) на jQuery, встроенный в fadeIn/fadeOut, с соответствующим временем анимации в мс.

Ознакомьтесь с документацией по jQuery FadeOut.

Пример затухания:

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

Затухание очень похоже на затухание:

$('.node'+cls+', .link'+cls').fadeIn(900);
person oshikryu    schedule 13.05.2013