javascript - D3过渡，margin-top进展不顺利

Question

如果您转到this plunk ，您可以看到 margin-top 从 25% 开始，然后我尝试

.transition().duration(3000)
    .style("margin-top", "1%")

但是，输入在返回之前会下降到底部。我想知道为什么会发生这种情况。

Answer 1

有趣的谜题。 d3 代码中的几个不同细节(每个细节都旨在使转换更加灵活)正在共同破坏您完美简单的转换。

transition.style()方法使用 getCompulatedStyle 来计算转换的起始值，即使您已显式内联或使用 d3 设置样式。

问题是浏览器会自动converts percentage values to pixels when determining the results of getComputedStyle 。因此，尽管您打算直接计算从 25% 到 1%，但 d3 尝试计算的实际转换介于 124.75px 到 1%。

当插入任何非简单数字(或颜色)的值时，d3 的 string interpolation method用来。插值器识别之前和之后字符串中的所有数字，并转换它们，但对于字符串的其余部分，它只是替换为“after”值。

因此，对于从 124.75px 到 1% 的转换，数字从 124.75 转换到 1，但单位立即从px翻转到%。结果？您的元素突然从 margin-top: 25% 跳到 margin-top: 124% (或附近)，然后再降至 1%。

解决方法是自己计算 1% 边距的像素长度(请记住，顶部和底部边距的 % 值是相对于父容器的宽度计算的)，并将其用作过渡的最终值。然后，在转换完成后(在 each("end", function) 调用中)，重新设置百分比值的边距，以便在窗口大小调整时它能够做出响应。