关于 SVG 样式转换的另一个问题... :)
这次我试图在文本元素上转换字体大小。在我增加 Chrome 中的页面缩放之前,它工作正常。一旦我这样做,它似乎在过渡开始时将尺寸设置为原始缩放尺寸,然后再过渡到正确的结果尺寸。结果是我看到字体大小在变大之前一瞬间变小了。
使用默认缩放,过渡看起来很平滑。其他浏览器似乎没有这个问题。
想知道我是否可以通过一些样式设置技巧再次尝试我的运气,这些技巧将在浏览器中更可靠地工作......
这是因为 D3 的样式转换用于getComputedStyle
检索要插入的起始值。请参阅此处了解更多信息。当使用 WebKit 的整页缩放时,这将为过渡返回不同的起始值。这种差异仅限于某些情况,包括font-size
,这就是为什么您可能不会在其他地方看到它。
事实上, after .style("font-size", A)
,检索 via.style("font-size")
并不能保证返回A
在使用整页缩放时设置的值。
我过去曾为此使用过以下解决方法:
.styleTween("font-size", function(d) {
return d3.interpolate(
this.style.getPropertyValue("font-size"),
d.size + "px"
);
});
这会覆盖 D3 的使用getComputedStyle
并直接检索当前font-size
样式(并假设font-size
在您的选择中已经设置了一个.enter()
)。
再次,我的词云经验派上了用场。:)
浏览器页面缩放与 SVG 结合使用时存在问题。您可以使用 CSS 修复缩放级别,例如* { zoom: 1; }
,但这会给用户带来其他不便。您可以尝试解决 JavaScript 中的错误,但我认为这将是很多工作。