放大后在Chrome上过渡字体大小

Question

关于SVG样式转换的另一个问题......：）

这次我试图在文本元素上转换font-size。它工作正常，直到我增加Chrome中的页面缩放。一旦我这样做，它似乎在转换开始时将大小设置为原始缩放大小，然后转换到正确的结果大小。结果是我看到字体大小的电影在变大之前会瞬间变小。

使用默认缩放，过渡看起来很平滑。其他浏览器似乎没有这个问题。

想知道我是否可以再次尝试使用一些可以在浏览器中更可靠地运行的样式设置技巧...

Answer 1

这种情况正在发生，因为D3的样式转换使用getComputedStyle来检索要插值的起始值。有关详细信息，请参阅here。当使用WebKit的整页缩放时，这将返回转换的不同起始值。这种差异仅限于某些情况，包括font-size，这就是为什么你可能不会在其他地方看到它。

事实上，在.style("font-size", A)之后，无法保证通过.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()选择中。

同样，我的word cloud经验派上了用场。 ：）

Answer 2

浏览器页面缩放与SVG一起出错。您可以使用CSS修复缩放级别，例如* { zoom: 1; }，但这会给用户带来其他不便。您可以尝试解决JavaScript中的错误，但我认为这将是很多工作。