SVGとjQueryを使用した動的ジオマップ-jsチュートリアル-php.cn

SVGとjQueryを使用した動的ジオマップ

チャートを作成する必要がある場合、私の最初の選択肢はGoogleチャートまたは別の専用ライブラリです。しかし、時々、そこには見つからないいくつかの具体的な機能が必要です。これらの場合、SVG画像は非常に貴重であることが証明されています。

最近、データベースから取得したいくつかの値に応じて各地域の色調が異なるイタリアの地図を表示できるレポートページを作成する必要がありました。 SVGのおかげで、このタスクは非常に簡単でした

キーテイクアウト

SVG画像を使用して、データベースから取得したデータに基づいて、各領域の異なる色の色調を備えた動的ジオマップを作成できます。これは、データベースで使用されているコードに一致する一意のレベル名を持つ単一のオブジェクトとして、データを識別する単一のオブジェクトとして描画することによって達成されます。

マップをCSSやjQueryとインタラクティブにすることができ、マウスが領域を覆うときに人口価値などの特定のデータを表示できるようにします。これは、g：hoverと新しいinfo_panelクラスのCSSルールを追加して情報ボックスをスタイルすることで達成され、以前のサイクルを変更し、.data（）を追加して、Hoverに表示される情報を保存します。

すべての領域は単一のオブジェクトとして描画されており、それぞれに独自のレベルがあり、データベースで使用されるコードと一致する名前が相対データ（たとえば、Tuscanyの「TOS」）を識別します。

最後に、マップをSVGファイルとして保存する必要があります。以下に示すように、イラストレーターの「スタイル要素」に「CSSプロパティ」オプションを設定するように注意する必要があります。

SVGとjQueryを使用した動的ジオマップ

作成されたばかりのファイルを開くと、IDがイラストレーターレベルの名前と一致するGタグのセットが含まれています。

htmlファイルの構築

Gタグに含まれる各アイテムにはST0クラスがあり、ストロークと充填CSSプロパティをそれらに割り当てることができます。

SVGとjQueryを使用した動的ジオマップこれらの値を変更しようとすると、マップはすぐに変更されます。

次に、そのコードを使用して、以下に示すようにインライン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メソッドを使用できます。

その後、すべての地域のアイテムを循環し、計算に従って透明性の割合を適用できます

人口 /最大値

（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の重要な修飾子は、塗りつぶしルールの

特異性 SVGとjQueryを使用した動的ジオマップを改善するために必要です。

それから、以前のサイクルを変更する必要があります。.data（）を追加して、ホバーに表示される情報を保存する必要があります。

最後に、マウスオーバーエフェクトを追加することでスクリプトを完成させることができます：

それがどのように機能するか：

最初に、マウスオーバーを使用すると、表示する情報（領域名と母集団）を含むDIVを構築します。 divは、マウスがG要素の上にホバリングするたびに構築され、ドキュメント本体に追加されます;
カーソルがホバリングされた領域の外側にあるときに、mouseleaveはそのdivを削除します;
最後の方法であるMousemoveは、マウス座標を取得し、生成されたdivに割り当てます。

ここにCodepenの最終結果があります：

CodepenのSitePoint（@SitePoint）のペンKDHFHを参照してください SVGとjQueryを使用した動的ジオマップに関するよくある質問（FAQ）

svgマップをアニメーション化するにはどうすればよいですか？