私は、D3ライブラリを使用して生成されたSVGグラフに関連する会社のWebアプリケーションの問題を修正する任務を負っています。問題は、グラフが最初はうまく表示されることです。ただし、iPadまたはその他のiOSデバイスを使用して表示し、ユーザーがグラフを拡大すると、すぐにエイリアス/「あいまい」になります。可能であれば、この品質の低下を防ぎたいと思います。
ここで問題の例を見ることができます：通常のグラフ、ズームされたグラフ
私はこれまでSVGやD3を使ったことがなく、この種のものを処理するためのオプションが提供されているかどうかはわかりません。もしそうなら、私が読んだどのドキュメントでもそれらを見つけることができませんでした。
これはiOSのズーム方法の結果である可能性があり、ズームイベントをキャッチして、目的の倍率レベルでグラフの再レンダリングをトリガーする以外に、私ができることではない可能性があります。それが可能かどうかはわかりません。
誰かが私がこれを修正する方法についていくつかの提案を持っているなら、私はアドバイスを大いに感謝します。
iOS のデフォルトのズーム動作では、ズーム中に固定解像度のテクスチャが使用されます。これは、ハードウェア アクセラレータによるズームと呼ばれます。したがって、ページの一部を取り、2 本の指を使用してズームインすると、ズーム中にグラフィックが一時的にピクセル化されて表示される場合があります。これはどのページにも当てはまるため、多くの iOS ユーザーは慣れている可能性があります。
ベクター グラフィックス形式である SVG の優れた点は、指を離すとすぐにブラウザーが新しい解像度で SVG を再レンダリングすることです。
ズーム中に鮮明な解像度を維持したい場合は、ネイティブのハードウェア アクセラレーションによるズームを無効にし、代わりにタッチ イベントに応答してグラフを再レンダリングする必要があります。d3.behavior.zoom を使用して、視覚化にパンとズームの相互作用を追加できます。ただし、ビジュアライゼーションの複雑さによっては、ハードウェア アクセラレーションによるズームよりも遅くなる場合があることに注意してください。
d3.behavior.zoom と d3.geo.path を組み合わせて手法を示す例を次に示します: http://bl.ocks.org/2374239。
