チャートを作成する必要がある場合、私の最初の選択肢はGoogleチャートまたは別の専用ライブラリです。しかし、時(shí)々、そこには見つからないいくつかの具體的な機(jī)能が必要です。これらの場合、SVG畫像は非常に貴重であることが証明されています。
最近、データベースから取得したいくつかの値に応じて各地域の色調(diào)が異なるイタリアの地図を表示できるレポートページを作成する必要がありました。 SVGのおかげで、このタスクは非常に簡単でした
キーテイクアウト
SVG畫像を使用して、データベースから取得したデータに基づいて、各領(lǐng)域の異なる色の色調(diào)を備えた動的ジオマップを作成できます。これは、データベースで使用されているコードに一致する一意のレベル名を持つ単一のオブジェクトとして、データを識別する?yún)g一のオブジェクトとして描畫することによって達(dá)成されます。
マップをCSSやjQueryとインタラクティブにすることができ、マウスが領(lǐng)域を覆うときに人口価値などの特定のデータを表示できるようにします。これは、g：hoverと新しいinfo_panelクラスのCSSルールを追加して情報(bào)ボックスをスタイルすることで達(dá)成され、以前のサイクルを変更し、.data（）を追加して、Hoverに表示される情報(bào)を保存します。
SVGマップは、他のJavaScriptライブラリとともに使用され、データの視覚化に使用され、さらにはアニメーション化され、応答性の高いものにすることができます。また、パフォーマンスに合わせてカスタマイズして最適化することもできます。ただし、カスタムマップを作成するには、SVGと地理的データの両方を十分に理解する必要があり、複雑なアニメーションはパフォーマンスに影響を與える可能性があります。
-
イラストレーターでSVGマップを作成-
最初に、私はイラストレーターと一緒にイタリアの地図を描きました：-
すべての領(lǐng)域は単一のオブジェクトとして描畫されており、それぞれに獨(dú)自のレベルがあり、データベースで使用されるコードと一致する名前が相対データ（たとえば、Tuscanyの「TOS」）を識別します。
最後に、マップをSVGファイルとして保存する必要があります。以下に示すように、イラストレーターの「スタイル要素」に「CSSプロパテ?！攻抓伐绁螭蛟O(shè)定するように注意する必要があります。
作成されたばかりのファイルを開くと、IDがイラストレーターレベルの名前と一致するGタグのセットが含まれています。
htmlファイルの構(gòu)築
Gタグに含まれる各アイテムにはST0クラスがあり、ストロークと充填CSSプロパティをそれらに割り當(dāng)てることができます。
これらの値を変更しようとすると、マップはすぐに変更されます。
次に、そのコードを使用して、以下に示すようにインライン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タグ內(nèi)のスタイル屬性が消去され、ドキュメントヘッド內(nèi)にある新しいものに置き換えられていることがわかります。すべてのG要素は最初は明るい灰色で満たされていました。
ST0クラスは使用されなくなり（SVGコードから削除できます）、.map Gセレクターに置き換えられました。とにかく、これは必須ではありません。好みのCSSセレクターを使用できます。
2番目のステップは、マップをデータベースから取得したデータにバインドすることで構(gòu)成されています。この例では、私たちの目標(biāo)は、各地域の人口に従ってマップをペイントすることです。
JSONデータとJavaScriptの追加
データはJSON形式で取得され、HTMLファイル內(nèi)に直接貼り付けられます（もちろん、現(xiàn)実の世界では、データはAJAXなどを使用して取得されます）。
今、私たちのページには、このように見えるJavaScriptファイルにJSONが含まれます（繰り返しますが、略されました）：
その後、色が選択され（この場合は＃0B68AA）、人口価値が最も高い地域に割り當(dāng)てます。他の領(lǐng)域は、人口の割合に比例して主な色のトーンで色付けされます。
次に、JavaScriptを追加できます
まず、人口値が最大の地域を決定する必要があります。これは、コードの數(shù)列で実行できます。
<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>母集団値を含む一時(shí)的な配列が構(gòu)築されたら、Math.maxメソッドを使用できます。
その後、すべての地域のアイテムを循環(huán)し、計(jì)算に従って透明性の割合を適用できます
人口 /最大値
（jQueryの少しの助けを借りて）：
これが結(jié)果です：
<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>いくつかのインタラクティブ性によってマップを改善することができます。マウスが領(lǐng)域に配置されているときに、人口価値を示したいです。
最初に、g：Hoverと新しいinfo_panelクラスのCSSルールを追加して、情報(bào)ボックスをスタイリングします。
.map g：Hoverの重要な修飾子は、塗りつぶしルールの
特異性を改善するために必要です。
それから、以前のサイクルを変更する必要があります。.data（）を追加して、ホバーに表示される情報(bào)を保存する必要があります。
最後に、マウスオーバーエフェクトを追加することでスクリプトを完成させることができます：
それがどのように機(jī)能するか：
- 最初に、マウスオーバーを使用すると、表示する情報(bào)（領(lǐng)域名と母集団）を含むDIVを構(gòu)築します。 divは、マウスがG要素の上にホバリングするたびに構(gòu)築され、ドキュメント本體に追加されます;
- カーソルがホバリングされた領(lǐng)域の外側(cè)にあるときに、mouseleaveはそのdivを削除します;
- 最後の方法であるMousemoveは、マウス座標(biāo)を取得し、生成されたdivに割り當(dāng)てます。
ここにCodepenの最終結(jié)果があります：
CodepenのSitePoint（@SitePoint）のペンKDHFHを參照してください
SVGとjQueryを使用した動的ジオマップに関するよくある質(zhì)問（FAQ）
以上がSVGとjQueryを使用した動的ジオマップの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。
![\"SVGとjQueryを使用した動的ジオマップ\"](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/174011119936387.png\")
を改善するために必要です。\n\n<\/p>それから、以前のサイクルを変更する必要があります。.data（）を追加して、ホバーに表示される情報(bào)を保存する必要があります。\n\n