问在SVG世界地图上叠加工具提示样式数据

EN

检测鼠标悬停事件并访问标题元素组information

• Create-or-show a

2. title
   • 将它们附加到SVG文档的末尾，使它们成为标题。

​

1. 根据元素填充适当的数据相应地
   • 您需要将光标点从屏幕空间转换到SVG空间，或者计算源元素的边界框并将其从可能转换的对象空间转换到全局SVG space.

​

1. 检测标题元素的鼠标输出。

上面有没有哪部分是你做不到的？

编辑：回答下面评论中的大量问题：

SVG你可以把你的脚本放在内部或者外部的嵌入

1. 中；如果它们是自包含在SVG中的(就像你的一样)，那么最好把它们放在这里，这样你就可以在外部嵌入你的SVG，让它仍然work.
2. Finding任何东西的列表是最简单的，你可以通过下面的方法在它们上放置一个通用的class="foo"属性：

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

或者，您可以基于结构进行查询；例如，如果每个国家/地区都是一个包含在<g id="countries">中的<path>，那么您可以使用：

var countries =document.querySelectorAll(‘#国家路径’)；

但是，如果您拥有的只是一个if数组，那么您需要执行以下操作：

var countryIDs =“美国”，“巴西”，…；//老学校var countries = []；for (var i=countryIDs.length；i--；){ countriesi=document.getElementById(countryIDsi)；} //新学校var国家=countryIDs.map(i=countryIDs.length(Id){ document.getElementById(id)；})；

• 为每个函数附加一个事件处理程序：

function showTooltip(evt){ var element = evt.target；//您的代码在这里} countries.forEach(function(el){ el.addEventListener('mouseover'，showTooltip，false)；})；

或者，您可以只将事件处理程序附加到一个公共祖先，然后在那里处理它：

svg.addEventListener('mouseover'，function(evt){ var

• = evt.target；if (element.hasAttribute('title')){ //你的代码在这里}}

• <script>放在</svg>之前是最简单的，但如果你愿意，你可以把它放在最上面，而且它只在文件加载完成时才起作用，例如：

window.addEventListener('load'，function(){ //将所有代码放在这里}，false)；

• 很容易找到关于嵌入SVG的信息，你是对的，有很多方法可以做到这一点。这里有一个nice article about it。我个人主张要么使用SVG in XHTML，要么使用SVG in HTML5.

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