SVG世界地図上にツールチップスタイルのデータを重ねる

Question

私は世界のSVGマップ（public domain file from wikipediaに基づいています）を得て、個々の国を強調表示するCSSを生成しました。

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

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

このSVGには、この種の使用を容易にするように設計されたnice idおよびclass属性が含まれています。

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

Answer 1

1. ように、彼らはdraw above all other content
title要素のグループが
• SVG文書の末尾に要素を追加表示し作成・オア・mouseoverイベントにtitle情報
• を
• アクセスを検出
• タイトルに基づいて適切なデータを要素に取り込みます。
• eleそれに応じて
  • カーソル・ポイントをスクリーン・スペースからSVGスペースに変換するか、ソース・エレメントのバウンディング・ボックスを計算し、おそらく変換されたオブジェクト・スペースからグローバルSVGスペースに変換することが必要です。
• は、マウスアウトイベントに
• 隠す-または-破壊title要素を検出します。

あなたができない部分はありますか？

---

編集：以下のコメントからの質問の富答える：あなたはSVG内部または外部の埋め込みHTMLにスクリプトを配置することができます

1. を。それらがSVGに自己完結していれば（あなたのように）、SVGを外部に埋め込み、まだ動作させることができるように、ここに配置する方が良いでしょう。何のリストを見つける

2. は、のうちの1つを介して、それらに共通class="foo"属性を置くあなたの最も簡単です：

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

   それとも構造に基づいて照会することができます。すべての国が<g id="countries">内に含まれる<path>ある場合たとえば、あなたは使用することができます。

   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); 
   }); 
   

   あなたは一度だけ共通の祖先にイベントハンドラをアタッチすることができ、また

   function showTooltip(evt){ 
       var element = evt.target; 
       // your code here 
   } 
   
   countries.forEach(function(el){ 
       el.addEventListener('mouseover',showTooltip,false); 
   }); 
   

   、およびhandl：

は、それぞれにイベントハンドラをアタッチするにはそこにE：

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

4. 右</svg>の前に置かれたとき<script>が最も簡単ですが、あなたがしたい場合は、上部にそれを置くことができ、ファイルの読み込みが完了したとき、それは単に例のために、その作業を行います。

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

5. それを行うには多くの方法がありますが、それはSVGを埋め込むことで情報を見つけるのは簡単だ、とあなたは正しいです。 1つはnice article about itです。私は個人的にSVG in XHTMLか、必要ならばSVG in HTML5のどちらかを主張します。

Answer 2

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