gpt4 book ai didi

javascript - 如何使用选择/选项淡入/淡出 d3 强制布局的某些部分?

转载 作者:行者123 更新时间:2023-11-28 09:36:06 24 4
gpt4 key购买 nike

我的场景是这样的:我有一个带有选项的选择框和一个可爱的 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

有人可以帮忙吗?

最佳答案

您应该将您的transition().duration(500).style('opacity', 1)替换为jQuery内置的fadeIn/fadeOut以及适当的动画时间(以毫秒为单位)。

查看 jQuery FadeOut documentation

淡出示例:

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

淡入与淡出非常相似:

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

关于javascript - 如何使用选择/选项淡入/淡出 d3 强制布局的某些部分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13031517/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com