DC.JS 如何为行图中的行顺序设置动画？

Question

我有一个按值排序的行图（从大到小）。筛选数据时，行顺序按预期更改。但是，行的顺序会立即更改。

有没有办法在行发生变化时为行的重新排序设置动画？

我已经搜索了可能的方法，但我找不到任何东西。

我看到每一行根据其位置都有一个 class。所以。第一个有 classes 行 _0，下一行有 _1 等，但无法弄清楚如何获得 _0、_1 ... classes 并使用预转换函数, 比如

    myChart.on('pretransition', function(chart) {...}

为订单设置动画。但是想不通。

Answer 1

制作这个动画非常简单，但测试它会在我修复的基础混合中暴露 a major bug。所以这个演示只适用于版本 4.0.4.

在不改变源代码的情况下，没有很好的方法来实现动画。

This fiddle 复制 dc.RowChart 以创建一个 AnimatedRowChart，对 dc.js 和 d3 中的符号进行一些小改动，以下是重要的改动：

使用按键功能

在添加数据的时候，我们会用到一个key函数，

        .data(this._rowData, ({key}) => key);

这将 join 数据，以便 D3 知道哪个柱线去了哪里。

动画行

而不只是设置行的位置

rows.attr('transform', (d, i) => `translate(0,${(i + 1) * this._gap + i * height})`)

我们会给他们一个动画过渡

    dc.transition(rows, this.transitionDuration(), this.transitionDelay())
        .attr('transform', (d, i) => `translate(0,${(i + 1) * this._gap + i * height})`);

我还认为如果新行从它们的最终位置而不是顶部开始看起来更好，所以我也改变了它。由此产生的转换仍然存在很多问题，但它们大多是有道理的。

我还没准备好发布这个，所以它在 dc.js 的 a branch 上。

这是完整的 AnimatedRowChart demo fiddle，您可以将其粘贴到您自己的应用程序中。

SO 似乎没有让我的 GIF 循环播放，所以如果您错过了，请重新加载页面！

DC.JS 如何为行图中的行顺序设置动画？

DC.JS how to animate the order of the rows in a rowchart?

d3.js

dc.js

使用按键功能

动画行