gpt4 book ai didi

d3.js - D3 : How to create slow transition of circle radii for nodes in force directed graphs?

转载 作者:行者123 更新时间:2023-12-05 01:08:06 25 4
gpt4 key购买 nike

我正在使用 D3 生成的单选按钮将 FDG 布局(鼠标单击)中节点的大小从默认大小切换到缩放大小。您可以在 Node Cluster Diagram 的左上角找到单选按钮。 ( http://nounz.if4it.com/Nouns/Applications/A__Application_1.NodeCluster.html )

enter image description here

在默认数字和缩放幅度之间切换节点圆圈的代码如下所示......

    var densityControlClick = function() {

var thisObject = d3.select(this);
var typeValue = thisObject.attr("density_type");
var oppositeTypeValue = (function() {
if(typeValue=="On") {
return "Off";
} else {
return "On";
}
})();

var densityBulletSelector = "." + "densityControlBullet-" + typeValue;
var selectedBullet = d3.selectAll(densityBulletSelector);
selectedBullet.style("fill", "Black")

var oppositeDensityBulletSelector = "." + "densityControlBullet-" + oppositeTypeValue;
var selectedOppositeBullet = d3.selectAll(oppositeDensityBulletSelector);
selectedOppositeBullet.style("fill", "White")

if(typeValue=="On") {
var selectedNodeCircles = d3.selectAll("#NODE");
selectedNodeCircles.attr("r", function(d){ return rRange(d.rSize); });
}
else {
var selectedNodeCircles = d3.selectAll("#NODE");
selectedNodeCircles.attr("r", function(d) { if (d.id==focalNodeID) { return centerNodeSize; } else { return defaultNodeSize; } } );
}

}

一切正常,但圆半径的过渡是瞬时的。我希望过渡慢一点,以展示 D3 的动态特性。

无论如何知道如何更改上面的代码以减慢圆的大小/半径过渡?而且,你能不能用英语解释一下发生了什么,这样我才能理解代码背后的理论? (注意:我尝试阅读 API,但我发现应用转换并不简单。)

谢谢你的帮助。我很感激。

最佳答案

在最简单的版本中,将过渡视为只是对选择的装饰。要更新您的代码,您需要做的就是获取您拥有的位置:

selectedNodeCircles.attr(...);

并插入一个过渡:
selectedNodeCircles.transition().duration(1000).attr(...)

因为您只是将“r”属性从一个数值更改为另一个 D3 将负责为两者之间的过渡设置动画。你可以看到一个非常简单的例子 here

您的代码中发生的事情是选择中的每个元素都为 r 获取新值。设置属性并重新渲染 svg 并完成。

当您添加过渡时,而不是直接设置属性,而是设置为选择的每个元素创建的过渡的结束值。事实上,如果您在过渡期间进行调试,您应该能够在所有圆圈上看到 __transition 对象。

此转换对象将读取属性的初始值并获取您的最终值,然后根据随时间从 0 到 1 的参数计算中间值。该参数从 0 到 1 所需的时间取决于过渡持续时间的值(如何从 0 到 1 取决于它的“缓动”功能)。

欲了解更多详情,请查看 this tutorial

关于d3.js - D3 : How to create slow transition of circle radii for nodes in force directed graphs?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17603294/

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