Question

我的数据是数字数组。

定期数字被交换以随机化数组。

每个数字由条形图中的条形表示。

在每一步中，我都要强调通过运行一个改变颜色和不透明度（眨眼效果）的简单转换来交换的两个元素。

到目前为止，在交换之前我复制数据集，然后，在动画更新选择时，我通过比较其值来检查数字是否已移动在同一位置的前一个数据集的值：如果不同，我会改变颜色和不透明度。

以下是代码：

bars.transition()
        .attr("fill", function(d, i) { return d !== previous[i] ? "green" : "blue"; })
        .attr("opacity", function(d, i) { return d !== previous[i] ? 0.5 : 1; })
    .transition()
        .attr("x", getX)
    .transition()
        .attr("fill", "blue")
        .attr("opacity", 1);

“问题”是所有现有的栏都受到“影响”，而不仅仅是更新的栏。

我有两个问题：

虽然这是不可见的（其他条“移动”到同一个位置并且它们的填充“被改变”为相同的颜色）我想从性能的角度来看这是不理想的，因为有一个很多无用的处理（100条98％的身份操作）。
此外，更改数据的特殊执行路径是通过“无所事事”路径进行交错（通过条件语句），这显然不是理解和维护的理想选择。

_

D3是否有“更改数据”的概念？

还有更多的D3做同样的事情吗？

_

提前致谢。

Answer 1

执行此操作的D3方法是将数据键入其值。也就是说，每个更改的栏都是“新”数据项，您可以使用.enter()和.exit()选项进行相应处理，这样您就可以直接访问已更改的内容。

然而，这不允许你轻松地“移动”条形 - 而不是改变一个条形的位置，你将删除一个并在新位置附加另一个条形。你当然可以破解进入和退出的选择，但是这种情况会失败。

相反，我会将选择过滤为仅包含值已更改的条形，然后对其进行操作。您只需要调用.filter()，其余代码就可以保持不变。

bars.filter(function(d, i) { return d !== previous[i]; })
    .transition()
    .attr("fill", "green")
    .attr("opacity", 0.5)
.transition()
    .attr("x", getX)
.transition()
    .attr("fill", "blue");
    .attr("opacity", 1);

获取更改的数据选择

1 个答案: