Domanda

I've got an SVG map which draws up perfectly and I've got some (average) code that offers a mouseOver, onClick and mouseOut state. In my finished page, I need to be able to click on different countries on the map and display data relating to that country in a table below it. (data table entry omitted, I've got that bit running on a local server already).

http://jsfiddle.net/dE9cK/

I've taken a snippet of my raphael-map code here to show how I get my map up and running, the full code is in the jsfiddle above:

var rsr = Raphael('SVGmap', '679', '350');

var layer1 = rsr.set();
var path6251 = rsr.path("M-289.826-562.781c-2.617-0.95-3.363-1.923-2.737-3.568c0.506-1.331,2.102-1.962,2.102-0.831   c0,0.303,0.547,1.292,1.216,2.197C-286.882-561.785-286.9-561.718-289.826-562.781z").attr({id: 'path6251',fill: '#909155',label: 'Ebene 1',groupmode: 'layer',parent: 'layer1','stroke-width': '0','stroke-opacity': '1'}).transform("t470,892.401").data('id', 'path6251');

var rsrGroups = [layer1];
layer1.push(
    path6251 
);

What I need help with is to:

  1. Add a unique ID/name to each path once it has been drawn up (to enable me to target each individual path for the data table - would prefer it if this was the current path name to make it easier to reference - I'm tidying up all path names once I've got this up and working).

    Each path has a data id in my JS file but I can't seem to get that to pull through with the path.

  2. Group paths together (I've got Alaska & USA as named paths in my fiddle, would like to know how I would group these two to both become selected/active when either is clicked).

Really appreciate any help anybody can give. Thank you.

È stato utile?

Soluzione

  1. You can use node property to get the element and set id to it like below

    path6251.node.id = 'p6251';

  2. Use set() method to group elements and perform operations on the set.

Sample code

var group1 = rsr.set();
group1.push(path1);
group1.push(path2);
group1.attr({fill: 'red'}); //will change color of both path1 and path2
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top