Question

我已经找到了关于d3过渡的等效“滴答功能”主题的一些帖子，但我很难让它们中的任何一个起作用。我有一个节点悬停功能（在力布局中），只是将正在悬停的圆的大小加倍...

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可以进一步解释这一点。

使用tween（）作为d3过渡的tick函数

1 个答案: