javascript - D3 可选过渡

标签 javascript animation d3.js

我有一个转换绘图点的 D3 图表。有时我希望这些是动画过渡,有时我希望它们是瞬时的。在 D3 中是否有一种 DRY 方法来执行此类操作?

例如:

    svg.selectAll('g.data-point')
        .data(dataset)
        .transition()
        .duration(transitionTime)
        .attr({
            class: function(d) {
                return getClassesForPoint(d);
            },
            transform: function(d) {
                return ('translate(' + ((d.x) ? xScale(d.x) : xScale(0)) + ', ' + yScale(d.y) + ')');
            }
        });

如果我只想根据条件进行动画转换,我是否需要通过 if-else 结构重复该 block 而不需要第 3-4 行,或者有更好的方法吗?链接让我有点不舒服。我已经尝试将它的持续时间设置为 0,它仍然会通过动画引擎。

有什么想法吗?

编辑:

原来我的选择器已经失效,正如 Lars 提到的,使用 duration(0) 工作正常。然而,我曾多次遇到过这种情况,两条链似乎有足够的共性,但我不知道如何正确或动态地添加/删除对链的调用。

最佳答案

transition object支持大多数 selection object 支持的方法(append 等函数除外),您可以有条件地选择其中一个进行操作:

var selection = svg.selectAll('g.data-point').data(dataset).enter();
if (condition) { selection = selection.transition().duration(transitionTime); }
selection.attr(/* .. */);

关于javascript - D3 可选过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20498058/

相关文章:

d3.js - d3 中高效的数据存储、分区和选择

javascript - 当用户停止输入搜索框时执行 api 请求

javascript - 在 Node.js 中发布和解码 JSON

css - rotateY 过渡的原点错位

swift - 如何使用在不同约束之间进行插值的自动布局执行交互式动画?

javascript - 如何使用 d3.js 在 Sunburst 图表上定位文本标签

javascript - JQuery 在创建 DOM 元素后做一些事情 - DOMNodeInserted 不工作

javascript - 使用 jQuery 传递变量

css - 如何让元素在CSS动画结束后立即回到初始位置?

d3.js - 带日期轴的 DC.js 条形图