遷移フォントサイズ

Question

SVG形式の遷移に関するもう一つの問題でズーム後のクロームに... :)

私はテキスト要素にフォントサイズを移行しようとしているこの時間。 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" 
); 
}); 

これはgetComputedStyleのD3の使用をオーバーライドし、直接現在のfont-sizeスタイルを取得（そして、あなたの.enter()選択でfont-sizeすでに設定されている例があると仮定し）。

もう一度、私のword cloudの経験が役立ちました。 :)

Answer 2

ブラウザのページズームはSVGと一緒にバグがあります。 * { zoom: 1; }のようにCSSでズームレベルを修正することはできますが、それはユーザーにとって他の不都合を引き起こします。あなたはJavaScriptのバグを回避しようとする可能性がありますが、それは多くの作業になると思います。