D3过渡，边际顶部进行得不顺利

D3 transition, margin-top does not proceed smoothly

本文关键字：不顺利顶部过渡 D3 更新时间：2023-09-26

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

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

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

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

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

其问题在于浏览器在确定getComputedStyle的结果时自动将百分比值转换为像素。因此，尽管您打算进行从25%到1%的直接计算，但d3试图计算的实际转换是在124.75px到1%之间。

当插值任何不是简单数字（或颜色）的值时，使用d3的字符串插值方法。插值器识别before和after字符串中的所有数字，并转换它们，但对于字符串的其余部分，它只替换"after"值。

因此，对于从124.75px到1%的转换，个数从124.75转换到1，但单元立即从px翻转到%。后果你的元素突然从margin-top: 25%跳到margin-top: 124%（或大约），然后下降到1%。

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