为拉斐尔 JS 世界地图中的国家/地区添加点击操作

Question

我正在制作一张世界地图，您可以在其中使用 raphaeljs 和 world.js 形状单击一个区域（北美、亚洲等）

@David Noël 开源了一个 way of combining countries into one element 突出显示你翻车的时间，我已经成功完成了。

我通常对 Javascript 没问题，但我不知道如何为这些区域创建点击事件，因此每个区域都会弹出一些相关信息。我认为上面的 Davids link 中可能有答案，但我没有完全理解文档

你可以在这里看到我到目前为止的进度.. http://thetally.efinancialnews.com/tallyassets/mapareas/index.html

Answer 1

好吧，在亲自联系了 David Noel 之后，他帮我找到了答案。

在任何地方初始化时，我使用国家代码创建了国家组，就像这样...

 <script src="anywhere.js"></script>
<script type="text/javascript">
  var aw = new Anywhere(
    document.getElementById('map_div'),
    {
<!--"AFRICA":["DZ","AO","SH","BJ","BW","BF","BI","CM","CV","CF","TD","KM","CG","DJ","EG","GQ","ER","ET","GA","GM","GH","GW","GN","CI","KE","LS","LR","LY","MG","MW","ML","MR","MU","YT","MA","MZ","NA","NE","NG","ST","RE","RW","ST","SN","SC","SL","SO","ZA","SH","SD","SZ","TZ","TG","TN","UG","CD","ZM","TZ","ZW","SS","CD"],-->
<!--"EUROPE":["AL","AD","AT","BY","BE","BA","BG","HR","CY","CZ","DK","EE","FO","FI","FR","DE","GI","GR","HU","IS","IE","IT","LV","LI","LT","LU","MK","MT","MD","MC","NL","NO","PL","PT","RO","RU","SM","RS","SK","SI","ES","SE","CH","UA","GB","VA","RS","IM","RS","ME"],-->
"EMEA":["AL","AD","AT","BY","BE","BA","BG","HR","CY","CZ","DK","EE","FO","FI","FR","DE","GI","GR","HU","IS","IE","IT","LV","LI","LT","LU","MK","MT","MD","MC","NL","NO","PL","PT","RO","RU","SM","RS","SK","SI","ES","SE","CH","UA","GB","VA","RS","IM","RS","ME","DZ","AO","SH","BJ","BW","BF","BI","CM","CV","CF","TD","KM","CG","DJ","EG","GQ","ER","ET","GA","GM","GH","GW","GN","CI","KE","LS","LR","LY","MG","MW","ML","MR","MU","YT","MA","MZ","NA","NE","NG","ST","RE","RW","ST","SN","SC","SL","SO","ZA","SH","SD","SZ","TZ","TG","TN","UG","CD","ZM","TZ","ZW","SS","CD"],
"NORTH AMERICA":["AI","AG","AW","BS","BB","BZ","BM","VG","CA","KY","CR","CU","CW","DM","DO","SV","GL","GD","GP","GT","HT","HN","JM","MQ","MX","PM","MS","CW","KN","NI","PA","PR","KN","LC","PM","VC","TT","TC","VI","US","SX","BQ"],
"SOUTH AMERICA":["AR","BO","BR","CL","CO","EC","FK","GF","GY","GY","PY","PE","SR","UY","VE"],
"ASIA":["AF","AM","AZ","BH","BD","BT","BN","KH","CN","CX","CC","IO","GE","HK","IN","ID","IR","IQ","IL","JP","JO","KZ","KP","KR","KW","KG","LA","LB","MO","MY","MV","MN","MM","NP","OM","PK","PH","QA","SA","SG","LK","SY","TW","TJ","TH","TR","TM","AE","UZ","VN","YE","PS"],
"PACIFIC":["AS","AU","NZ","CK","FJ","PF","GU","KI","MP","MH","FM","UM","NR","NC","NZ","NU","NF","PW","PG","MP","SB","TK","TO","TV","VU","UM","WF","WS","TL"]
},

..然后我的自定义 JS 文件看起来像这样...

// JavaScript Document

$( document ).ready(function() {


function changeChart() {

console.log('change');

if (dataSet == 1) {

var bank11 = 14
var bank12 = 74
var bank13 = 74

var bank21 = 45
var bank22 = 78
var bank23 = 111

var bank31 = 35
var bank32 = 75
var bank33 = 86 

} else if (dataSet == 2) {

var bank11 = 34
var bank12 = 74
var bank13 = 124

var bank21 = 45
var bank22 = 38
var bank23 = 211

var bank31 = 35
var bank32 = 15
var bank33 = 86 

}


$('.column1 .block1').animate({ 'height' : bank11 });
$('.column1 .block2').animate({ 'height' : bank12, 'bottom' : bank11 });
$('.column1 .block3').animate({ 'height' : bank13, 'bottom' : bank12+bank11  });

$('.column2 .block1').animate({ 'height' : bank21 });
$('.column2 .block2').animate({ 'height' : bank22, 'bottom' : bank21 });
$('.column2 .block3').animate({ 'height' : bank23, 'bottom' : bank22+bank21  });

}   


var dataSet = 0;


eve.on('aw:click', function (identifier, groupKey) {


if (groupKey == 'EMEA'){
dataSet = 1;
} 

if (groupKey == 'ASIA'){
dataSet = 2;
} 

changeChart();


console.log('you clicked ' + identifier +', in '+ groupKey);

$('.'+groupKey).css({"background-color":'#345'});

});


});

Answer 2

希望我还不算太晚^^' 好吧，过了一会儿 "inspect elements" 我只是为路径添加了一个点击侦听器，然后我获取 id 或名称或任何时候......

只需添加：

  $('path').click(function() {
             console.log(this.id);
             //do what you want with the id, name...you can make an ajax 
             call or anything you want
        });

如果你想要一个完整的例子，那就去吧：

window.onload = function () {
    // Create canvas and define attributes shared by all paths.
    var R = Raphael("container", 620, 690),
      attr = {
      "fill": "#b9b9b9",
      "stroke": "#fff",
      "stroke-miterlimit": "4",
      "stroke-width": "1",
      "transform": "s0.06,0.06,60,0" // Scales the path to a useful size.
    }; 
    // Define map object. 
    var africaMap = {};
    for (var nation in africaPaths) {
      // Draw a path, then apply attributes to it.
      africaMap[nation] = R.path(africaPaths[nation]).attr(attr);
      // Name the internal Raphael id after the africaPaths property name.
      africaMap[nation].id = nation;

      // Name the element id after the africaPaths property name.
      africaMap[nation].node.id = nation;
    }
    // For an example of interaction via Raphael, uncomment the line below.
   var demo1 = R.getById('tanzania').attr({"fill": "green"});
   $('path').click(function() {
             console.log(this.id);
             // here you do what you want ^^
        });  

  };

希望这对某人有所帮助，对不起我的英语。

为拉斐尔 JS 世界地图中的国家/地区添加点击操作

Add click action to countries in raphael JS world map

html

javascript

svg

click

raphael