如果您转到this plunk，可以看到margin-top从25%开始，然后我尝试
.transition().duration(3000)
.style("margin-top", "1%")
但是，在重新启动之前，输入会下降到底部。我想知道为什么会这样。
答案 0 :(得分：2)
有趣的谜题。 d3代码中的几个不同细节 - 每个都旨在使转换更加灵活 - 正在破坏你完美的简单过渡。
transition.style()方法使用getComputedStyle来计算转换的起始值，即使您已明确设置内联样式或使用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，但单元< / em>立即从px翻转到%。结果？在转换为1％之前，您的元素突然从margin-top: 25%跳到margin-top: 124%（或其左右）。
解决方法是自己计算1％边距的像素长度（记住顶部和底部边距的％值是相对于父容器的宽度计算的），并将其用作转换的最终值。然后，在转换完成后（在each("end", function)调用中），以百分比值重新设置边距，以便在窗口调整大小时响应。