javascript - 使用 tween() 作为 d3 转换的刻度函数

Question

我发现了许多关于 d3 转换的等效“tick 函数”主题的帖子，但我正在努力让其中任何一个发挥作用。我有一个节点悬停功能(在强制布局中)，它只需将悬停的圆的大小加倍...

nodeToHover.select(".outlinecircle")
                        .transition()
                        .duration(800)
                        .attr("r", function (d) { return (d.radius*2); })
                        .ease('exp')
                        //.tween('customTween', function() {console.log("hovering");}) 
                        .each("end", function(d){ updateLayout(); });

我现在想要实现的目标是在每个转换事件上向控制台输出一条消息(不知道是否每毫秒 1 条消息，但我假设在 800 毫秒的转换中应该有很多消息)。

我通读了API，似乎“tween()”应该实现这一点，尽管上面的代码只是在每个节点悬停时输出到控制台一次(就像我使用“each()”一样) - 并且具有相同的效果如果我将它直接放在“transition()”之后或如上所述放在链的末尾，就会产生效果。

如果相关，我尝试这样做的原因是因为当我在悬停期间更新节点大小时，我将需要相应地更新力布局中其他节点的位置(目前他们在过渡期间什么都不做，只是在过渡结束时跳到新位置)。

非常感谢任何关于我可能做错的事情的想法 - 谢谢!

Answer 1

对于自定义补间，您需要从传递给 .tween 的函数返回一个函数。该函数将使用当前转换状态(0 到 1 之间的数字)进行调用，并返回该点的属性值。在您的情况下，这将类似于以下内容。

.tween("name", function() { return function(t) { console.log(t); }; });

其中t是表示转换状态的数字。 documentation有一个稍微复杂一点的例子。还有一个评论良好的示例 here这进一步解释了这一点。