チャートを作成する必要がある場合、私の最初の選択肢はGoogleチャートまたは別の専用ライブラリです。しかし、時々、そこには見つからないいくつかの具體的な機能が必要です。これらの場合、SVG畫像は非常に貴重であることが証明されています。
最近、データベースから取得したいくつかの値に応じて各地域の色調が異なるイタリアの地図を表示できるレポートページを作成する必要がありました。 SVGのおかげで、このタスクは非常に簡単でした
キーテイクアウト
SVG畫像を使用して、データベースから取得したデータに基づいて、各領域の異なる色の色調を備えた動的ジオマップを作成できます。これは、データベースで使用されているコードに一致する一意のレベル名を持つ単一のオブジェクトとして、データを識別する単一のオブジェクトとして描畫することによって達成されます。
マップをCSSやjQueryとインタラクティブにすることができ、マウスが領域を覆うときに人口価値などの特定のデータを表示できるようにします。これは、g：hoverと新しいinfo_panelクラスのCSSルールを追加して情報ボックスをスタイルすることで達成され、以前のサイクルを変更し、.data（）を追加して、Hoverに表示される情報を保存します。
SVGマップは、他のJavaScriptライブラリとともに使用され、データの視覚化に使用され、さらにはアニメーション化され、応答性の高いものにすることができます。また、パフォーマンスに合わせてカスタマイズして最適化することもできます。ただし、カスタムマップを作成するには、SVGと地理的データの両方を十分に理解する必要があり、複雑なアニメーションはパフォーマンスに影響を與える可能性があります。
-
イラストレーターでSVGマップを作成-
最初に、私はイラストレーターと一緒にイタリアの地図を描きました：-
すべての領域は単一のオブジェクトとして描畫されており、それぞれに獨自のレベルがあり、データベースで使用されるコードと一致する名前が相対データ（たとえば、Tuscanyの「TOS」）を識別します。
最後に、マップをSVGファイルとして保存する必要があります。以下に示すように、イラストレーターの「スタイル要素」に「CSSプロパティ」オプションを設定するように注意する必要があります。
作成されたばかりのファイルを開くと、IDがイラストレーターレベルの名前と一致するGタグのセットが含まれています。
htmlファイルの構築
Gタグに含まれる各アイテムにはST0クラスがあり、ストロークと充填CSSプロパティをそれらに割り當てることができます。
これらの値を変更しようとすると、マップはすぐに変更されます。
次に、そのコードを使用して、以下に示すようにインラインSVGを使用してHTMLファイルをビルドできます（便利なため、コードは短縮されています）：
<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span> <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
</span> <span><span><span><title</span>></span>Map Sample<span><span></title</span>></span>
</span> <span><span><span><style</span> type<span>="text/css"</span> media<span>="all"</span>></span><span>
</span></span><span><span> <span><span>.map svg</span> {
</span></span></span><span><span> <span>height: auto;
</span></span></span><span><span> <span>width: 350px;
</span></span></span><span><span> <span>}
</span></span></span><span><span> <span><span>.map g</span> {
</span></span></span><span><span> <span>fill: #ccc;
</span></span></span><span><span> <span>stroke: #333;
</span></span></span><span><span> <span>stroke-width: 1;
</span></span></span><span><span> <span>}
</span></span></span><span><span> </span><span><span></style</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span> <span><span><span><div</span> class<span>="map"</span>></span>
</span> <span><span><span><svg</span> version<span>="1.1"</span> id<span>="Livello_1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span> <span>xmlns:xlink</span><span>="https://www.w3.org/1999/xlink"</span> x<span>="0px"</span> y<span>="0px"</span> viewBox<span>="0 -21.6 761 919"</span> <span>style<span>="<span>enable-background:new 0 -21.6 761 919;</span>"</span></span> <span>xml:space</span><span>="preserve"</span>></span>
</span> <span><span><span><g</span> id<span>="sar"</span>></span>
</span> <span><span><span><polygon</span> class<span>="st0"</span> points<span>="193,463 ... "</span>/></span>
</span> <span><span><span></g</span>></span>
</span>
<span><!-- etc ... -->
</span>
<span><span><span></svg</span>></span>
</span> <span><span><span></div</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>
SVGタグ內のスタイル屬性が消去され、ドキュメントヘッド內にある新しいものに置き換えられていることがわかります。すべてのG要素は最初は明るい灰色で満たされていました。
ST0クラスは使用されなくなり（SVGコードから削除できます）、.map Gセレクターに置き換えられました。とにかく、これは必須ではありません。好みのCSSセレクターを使用できます。
2番目のステップは、マップをデータベースから取得したデータにバインドすることで構成されています。この例では、私たちの目標は、各地域の人口に従ってマップをペイントすることです。
JSONデータとJavaScriptの追加
データはJSON形式で取得され、HTMLファイル內に直接貼り付けられます（もちろん、現実の世界では、データはAJAXなどを使用して取得されます）。
今、私たちのページには、このように見えるJavaScriptファイルにJSONが含まれます（繰り返しますが、略されました）：
その後、色が選択され（この場合は＃0B68AA）、人口価値が最も高い地域に割り當てます。他の領域は、人口の割合に比例して主な色のトーンで色付けされます。
次に、JavaScriptを追加できます
まず、人口値が最大の地域を決定する必要があります。これは、コードの數列で実行できます。
<span>var regions=[
</span> <span>{
</span> <span>"region_name": "Lombardia",
</span> <span>"region_code": "lom",
</span> <span>"population": 9794525
</span> <span>},
</span> <span>{
</span> <span>"region_name": "Campania",
</span> <span>"region_code": "cam",
</span> <span>"population": 5769750
</span> <span>},
</span>
<span>// etc ...
</span>
<span>];</span>母集団値を含む一時的な配列が構築されたら、Math.maxメソッドを使用できます。
その後、すべての地域のアイテムを循環(huán)し、計算に従って透明性の割合を適用できます
人口 /最大値
（jQueryの少しの助けを借りて）：
これが結果です：
<span>var temp_array= regions.map( function( item ) {
</span> <span>return item.population;
</span><span>});
</span>
<span>var highest_value = Math.max.apply( Math, temp_array );</span>
CSSおよびjQueryとの雙方向性の追加
<span>$(function() {
</span> <span>for(i=0; i < regions.length; i++) {
</span> <span>$('#'+ regions[i].region_code).css({'fill': 'rgba(11, 104, 170,'
</span> <span>+ regions[i].population/highest_value
</span> <span>+ ')'});
</span> <span>}
</span><span>});</span>いくつかのインタラクティブ性によってマップを改善することができます。マウスが領域に配置されているときに、人口価値を示したいです。
最初に、g：Hoverと新しいinfo_panelクラスのCSSルールを追加して、情報ボックスをスタイリングします。
.map g：Hoverの重要な修飾子は、塗りつぶしルールの
特異性を改善するために必要です。
それから、以前のサイクルを変更する必要があります。.data（）を追加して、ホバーに表示される情報を保存する必要があります。
最後に、マウスオーバーエフェクトを追加することでスクリプトを完成させることができます：
それがどのように機能するか：
- 最初に、マウスオーバーを使用すると、表示する情報（領域名と母集団）を含むDIVを構築します。 divは、マウスがG要素の上にホバリングするたびに構築され、ドキュメント本體に追加されます;
- カーソルがホバリングされた領域の外側にあるときに、mouseleaveはそのdivを削除します;
- 最後の方法であるMousemoveは、マウス座標を取得し、生成されたdivに割り當てます。
ここにCodepenの最終結果があります：
CodepenのSitePoint（@SitePoint）のペンKDHFHを參照してください
SVGとjQueryを使用した動的ジオマップに関するよくある質問（FAQ）
以上がSVGとjQueryを使用した動的ジオマップの詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。
![\"SVGとjQueryを使用した動的ジオマップ\"](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/174011119936387.png\")
を改善するために必要です。\n\n<\/p>それから、以前のサイクルを変更する必要があります。.data（）を追加して、ホバーに表示される情報を保存する必要があります。\n\n