Raphael - Получить идентификатор и имя пути

Question

Я строию интерактивную карту, используя библиотеку Рафаэля. В рамках функциональности пользовательского интерфейса у меня есть несколько функций, которые будут выполняться при наведении курсора мыши, мыши и onclick. Чтобы сделать это, я должен извлечь несколько полей в пределах объекта Рафаэля.

У меня есть JSON-файл, который загружается при загрузке страницы и используемый этой функцией, чтобы нарисовать карту США и графств:

function drawMap(data) { 
    map = Raphael(document.getElementById("us_map_container", 555, 352)); 

    var pathCount = data.length; 

    for (i = 0; i < pathCount; i++) { 
    var currentPath = map.path(data[i][2]); 
    currentPath.name = data[i][0]; 
    currentPath.id = data[i][1]; 
    currentPath.attr({"stroke" : "#FFFFFF", "fill" : "#CBCBCB", "stroke-width" : "0.2"}); 
    currentPath.mouseover(function(e){countyMouseOver(e)}); 
    currentPath.mouseout(function(e){countyMouseOut(e)}); 
    } 
} 

данные форматируются в более 3000 строк с форматированием

["North Slope, AK", "02185", 
    ["M62", "259L63", "258L64", "257L64", "258L64", "258L64", "258L66", "257L68", "255L70", 
    "256L70", "256L69", "257L69", "258L70", "257L70", "256L71", "256L71", "257L72", "257L72", 
    "258L73", "257L74", "257L75", "257L76", "257L75", "258L75", "258L76", "258L76",   
    "259L77", "259L78", "258L81", "258L82", "259L83", "259L84", "259L84", "259L85", "259L86", "259L87", 
    "259L89", "259L89", "259L90", "258L90", "258L91", "258L92", "258L96", "259L97", "263L97", 
    "265L88", "267L89", "269L87", "270L82", "271L82", "271L72", "272L69", "272L69", "271L68", 
    "271L68", "271L66", "271L64", "271L63", "271L63", "271L62", "271L62", "271L60", "271L60", 
    "271L60", "271L60", "271L59", "271L58", "270L57", "270L57", "271L57", "271L54", "271L54", 
    "272L52", "272L51", "271L50", "270L51", "269L51", "267L52", "267L54", "267L55", "267L56", 
    "265L57", "263L58", "261L59", "261L60", "261L61", "260L62", "259"] 
] 

Здесь name - это имя графства и аббревиатура двух букв, а id - номер FIPS для этого округа. Эти два поля представляют собой индексные позиции 0 и 1 соответственно. Третий массив - это массив строк, создающий путь для представления границ графства.

В случае события mouseover, как я могу получить имя и идентификатор элемента из объекта события?

До сих пор у меня есть

function countyMouseOver(e) { 
    var hover = e.target; 
    var countyName = hover.name; 
    $(hover).attr({"stroke" : "#FF0000", "stroke-width" : "1"}); 
} 

$(hover) позволяет мне установить цвет линии и толщину после события наведения мыши, но countyName пуст.

Когда у меня есть точка останова в функции выше, я могу получить raphaelid элемента, который сильно отличается от номера FIPS, который должен быть идентификатором. Поле name не определено.

Answer 1

Я узнал об этом решении и подумал, что кто-то в будущем сможет его использовать.

свелось к использованию Element.node.setAttribute() для пути, т.е.

currentPath.node.setAttribute("id", data[i][1]); 
currentPath.node.setAttribute("name", data[i][0]); 

И они могут быть доступны через объект события через

e.target.attributes[5].value; //get the name data 
e.target.id; //get the ID of the object 

или

e.target.getAttribute("id"); 
e.target.getAttribute("name"); 

Answer 2

и другое решение :

Вы можете назначить data("id", id) на ваш путь. Затем извлеките его в случае this.data("id").

EDIT

Вы можете присвоить данные дважды, и он будет работать, смотреть на DEMO

var paper = Raphael("area", 400, 400); 
var r = paper.rect(100, 100, 70, 40, 5).attr({fill: 'yellow', stroke: 'red'}); 
r.data("id",5); 
r.data("value", 4); 

r.click(function() { 
    alert(this.data("value")); 
    alert(this.data("id")); 
});