1

我正在使用 D3 转换来旋转文本，但遇到了一个奇怪的问题。从 0 度旋转到 -90 度时，过渡按预期工作。但是，当从 -90 度过渡到 0 时，过渡不起作用。可以在这里看到一个例子 - http://jsfiddle.net/t7MRa/。过渡到 0 度的代码是：

d3.selectAll("h2")
   .transition().duration(1000)
   .style("-webkit-transform", "rotate(0deg)");

我试过.style("-webkit-transform", "none")哪个没有用。关于我做错了什么的任何提示？谢谢！

4

1 回答 1

3

D3 用于getComputedStyle确定转换的起始值。不幸的是，getComputedStyle对于 CSS 变换返回变换矩阵，而不是您指定的变换字符串。因此，反向转换的起点如下所示：

matrix(0, -1, 1, 0, 0, 0)

（我实际上不确定为什么第一个转换有效。元素上没有转换时的转换矩阵值是“matrix（1, 0, 0, 1, 0, 0）”，并且字符串插值器能够以某种方式用它做点什么，但我不知道为什么。）

要解决此问题，您有几个选择：

  1. 如果您的起点和终点定义明确（如示例中所示），您可以创建一个自定义补间，它自己运行interpolateString，根据当前旋转状态作为“旋转”字符串传入已知的开始和结束变换。

  2. 您可以将“旋转”字符串转换为变换矩阵并将其传递给transition.style。关于CSS 转换的 MDN 文章说这rotate(angle)相当于[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0].

  3. 您可以切换到使用带有text元素的 SVG。d3 可以很好地理解 SVG 转换，并且在大多数情况下都可以使用（您的示例就是一个），而无需您进行特殊处理。

我确实找到了一个与 Firefox 有关的错误报告，其中有一些关于更改此问题的讨论，但考虑到 Firefox 和 WebKit 中都出现了相同的行为，似乎我们将在一段时间内忍受这种行为。

于 2013-09-10T22:09:41.073 回答