D3 可选过渡答案

【问题标题】：D3 Optional TransitionsD3 可选过渡
【发布时间】：2013-12-10 15:12:51
【问题描述】：

我有一个转换绘图点的 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 结构重复该块而不需要第 3-4 行，或者有更好的方法吗？链接让我有点失望。我已经尝试将其持续时间设为 0，但它仍会通过动画引擎。

有什么想法吗？

编辑：

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

【问题讨论】：

我不确定我是否理解您对使用 duration(0) 的担忧——它应该给您带来与没有过渡相同的行为，不是吗？
@LarsKotthoff 从技术上讲这是不正确的 - 外观将是相同的，但是它将代码转换为异步的。这通常没问题，但测试时有点痛苦。

标签： javascript animation d3.js

【解决方案1】：

由于transition object 支持大部分 selection object 支持的方法（append 等函数除外），您可以有条件地选择其中一种进行操作：

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

【讨论】：

这很优雅，但我怀疑它以后容易引起意想不到的问题，尤其是对于不了解您的代码的人。

【解决方案2】：

我会使用.call:

function transformationAndSetClass(selection){
   selection.attr({
        class: function(d) {
            return getClassesForPoint(d);
        },
        transform: function(d) {
            return ('translate(' + xScale(d.x ? d.x : 0) + ', ' + yScale(d.y) + ')');
        }
    });
}

然后，当您需要重用这些代码行时：

svg.selectAll('g.data-point')
    .data(dataset)
    .transition()
    .duration(transitionTime)
    .call(transformationAndSetClass)

【讨论】：

您的函数缺少右括号。否则，这工作得很好！

【解决方案3】：

如果需要，您可以使用 .each() 方法与 d3.select(this) 配对，以更精细地控制您的选择：

 svg.selectAll('g.data-point')
    .data(dataset)
    .each(function (d) {
      if (d.someCondition == "something") {
        d3.select(this)
        .transition()
        .duration(1000)
        .attr("transform", "translate(100,100)
      }
      else {
        d3.select(this).attr("transform", "translate(100,100)
      }

 })

显然，它有点冗长。

【讨论】：