iOSデバイスのズーム時のエイリアシングSVG要素の防止

Question

D3ライブラリを使用して生成されたSVGグラフを含む私の会社のWebアプリケーションでの問題を修正する課題がありました。問題は、グラフが最初は正常に表示されていることです。しかし、iPadや他のiOSデバイスを使って見て、ユーザーがグラフをズームすると、すぐにエイリアス/「あいまい」になります。可能であれば、このような品質の低下を防止したいと思います。

あなたがここでの問題の例を見ることができます：normal graphを、zoomed graph

は私が前にSVGまたはD3で働いたことがない、と私は彼らがこの種のものを処理するための任意のオプションを提供している場合はわかりません。もし私が読んだことがあれば、私はそれを見つけられませんでした。

これはiOSズーム方式の製品であり、ズームイベントをキャッチして希望の拡大レベルでグラフの再レンダリングをトリガーする以外に、それが可能かどうかはわかりませんが。

誰かが私がこれを修正する方法についていくつか提案しているなら、私はアドバイスを大いに感謝しています。

Answer 1

iOSのデフォルトのズーム動作では、ズーム時に固定解像度のテクスチャが使用されます。これは、ハードウェア加速ズームとして知られています。したがって、ページの一部を取り出して2本の指でズームインすると、ズーム中にグラフィックスが一時的にピクセル化して表示されることがあります。これはどのページでも当てはまるので、多くのiOSユーザーがそのページに慣れている可能性があります。

ベクトルグラフィックス形式であるSVGの素晴らしい点は、指を離すとすぐにブラウザがSVGを新しい解像度で再レンダリングすることです。

ズーム中に鮮明な解像度を維持するには、ネイティブのハードウェアアクセラレーションズームを無効にし、代わりにタッチイベントに応答してグラフを再描画する必要があります。 d3.behavior.zoomを使用して、パンニングとズームの対話をビジュアライゼーションに追加できます。ただし、視覚化の複雑さによっては、ハードウェアアクセラレーションによるズームよりも時間がかかることがあります。

ここでは、テクニックを示すために、d3.behavior.zoomとd3.geo.pathを組み合わせた例を示します。http://bl.ocks.org/2374239。