2

個々の国を強調するために生成された CSS を使用して、世界の SVG マップ (ウィキペディアのパブリック ドメイン ファイルに基づく) を取得しました。

各国に関する追加データを含むマウスオーバー ツールチップを追加する必要があります。データは PHP によって提供されます。

私は経験豊富な Web プログラマーですが、今まで SVG を扱ったことはありません。ユーザーのマウスの下にテキスト ツールチップを表示し、マウス カーソルの下にある特定の SVG ノードに関する情報を表示する最善の方法は何ですか?

この SVG は、この種の使用を容易にするために設計された便利な属性でいっぱいidですclass。

これは実用的なクロス ブラウザーにする必要がありますが、一部のブラウザー (Internet Explorer の古いバージョン) では機能を無効にできます。

4

2 に答える 2

4
  1. マウスオーバー イベントを検出する
  2. title情報にアクセスする
  3. タイトル要素のグループを作成または表示する
  4. タイトルに基づいて要素に適切なデータを入力します
  5. それに応じて要素を配置します
    • カーソル ポイントを画面空間から SVG 空間に変換するか、ソース要素のバウンディング ボックスを計算し、それを変換された可能性のあるオブジェクト空間からグローバル SVG 空間に変換する必要があります。
  6. マウスアウト イベントを検出する
  7. タイトル要素を非表示または破棄します。

上記のうち、できない部分はありますか？

編集：以下のコメントからの豊富な質問への回答：

  1. スクリプトを SVG の内部または埋め込み HTML の外部に配置できます。それらが SVG に自己完結している場合 (あなたの場合のように)、SVG を外部に埋め込んでも機能させることができるように、ここに配置することをお勧めします。

  2. 何かのリストを見つけるのは、次のclass="foo"いずれかを使用して、それらに共通の属性を配置するのが最も簡単です。

    var foos = document.querySelectorAll('.foo');
var foos = document.getElementsByClassName('foo');

    または、構造に基づいてクエリを実行できます。たとえば、すべての国が に<path>含まれている<g id="countries">場合は、次を使用できます。

    var countries = document.querySelectorAll('#countries path');

    しかし、ID の配列しかない場合は、次のようにする必要があります。

    var countryIDs = [ "usa", "brazil", … ];

// Old school
var countries = [];
for (var i=countryIDs.length; i--; ){
  countries[i]=document.getElementById(countryIDs[i]);
}

// New school
var countries = countryIDs.map(function(id){
  return document.getElementById(id);
});

  3. それぞれにイベント ハンドラーをアタッチするには:

    function showTooltip(evt){
  var element = evt.target;
  // your code here
}

countries.forEach(function(el){
  el.addEventListener('mouseover',showTooltip,false);
});

    または、イベント ハンドラーを共通の祖先に一度アタッチして、そこで処理することもできます。

    svg.addEventListener('mouseover',function(evt){
  var element = evt.target;
  if (element.hasAttribute('title')){
    // your code here
  }
}

  4. の<script>直前に配置すると最も簡単</svg>ですが、必要に応じて一番上に配置することもできます。ファイルの読み込みが完了したときにのみ機能します。次に例を示します。

    window.addEventListener('load',function(){
  // Put all your code here
},false);

  5. SVG の埋め込みに関する情報を見つけるのは簡単です。その通りです。その方法はたくさんあります。これについての素晴らしい記事があります。私は個人的に、XHTML の SVGか、必要に応じてHTML5 の SVGを推奨しています。

于 2012-05-01T01:15:19.473 に答える
0 
You can use append svg title to view additional data.
// Here we add an SVG title element the contents of which is effectively rendered in a tooltip   
        .append("svg:title")
          .text(function(d) {return "Name:"+d.Name;}); 
We can use this tooltip along with all svg element. Here d is a json object form this we are parsing the data.

https://gist.github.com/ilyabo/1339996

于 2013-08-21T09:55:45.347 に答える