Question

我有一套项目：

[
  { label: 'item1', color: 'yellow' },
  { label: 'item2', color: 'red' },
  { label: 'item3', color: 'blue' },
  { label: 'item4', color: 'green' }
]

主过渡将所有项目从左向右移动。

在这个主转换中，我想对每个项目应用单独的转换（此转换会上下移动）。

这最后一次转换有点特殊，因为每个项目都由text和circle组成，这两个部分彼此独立地移动。

这是一个向您展示示例的jsfiddle：http://jsbin.com/juyoyuzuta/1/edit?js,output

（对不起，如果示例有点难看，但你可以得到这个想法）

当我在浏览器中对此代码进行分析时，似乎浏览器正在进行大量的绘制/渲染。

我想知道我是否可以做一些优化来减少绘画/渲染。更常见的是，如果有更好的方法可以做到这一点。

Answer 1

我认为在此之后你将进入微优化领域。你按照我解决问题的方式来做，这里有一些你可以尝试的事情：

您可以尝试直接修改圆圈/标签的位置，而不是应用变换。我的直觉是，如果你得到任何硬件加速，你可能会失去它这样做（CSS变换是一个非常标准的事情，修改圆的cx不是）。
你可以减少移动量，这些圆圈看起来就像是只是嗡嗡作响的能量，可能会减慢速度并使圆圈向上/向下移动一点频率。旨在实现更顺畅的过渡，我认为你不会失去任何东西。

但从本质上讲，你正在做一个非常重的操作，而不是其他很多。因此，完全可以预期对代码进行分析将指向大量渲染和DOM操作。你基本上是在一个相当紧凑的循环中做这件事。

优化d3.js中的tween（）转换

1 个答案: