텍스트 위로 마우스를 가져 가면 호버가 끊어집니다.

Question

Raphael에서 경로와 텍스트가있는 세트를 가리 키려고합니다. 마우스를 올리면 텍스트가 아닌 경로의 색상 만 변경해야합니다. 현재 내 코드는 어떤 세트가 hover되고 있는지를 모르고 배열의 마지막 요소 만 변경합니다.

이 아마 바보 같은 실수,하지만 난 난처한 상황에 빠진 오전 : 여기

내 바이올린입니다 : 당신은 구현을 완료되지 않았습니다 http://jsfiddle.net/Kiaaanabal/znacD/1/

function hexHoverIn() { 
    hex.attr({fill: '#00411a'}); 
    console.log("Hovering Set" + i); 
} //hexHoverIn 

function hexHoverOut() { 
    hex.attr({gradient: '70-#004838-#028151'}); 
} //hexHoverOut 

var hexArray = new Array(); 

for(var i = 0; i < hexData.length; i++) { 
    var hex = paper.path(hexData[i].pathData); 
    hex.attr({rotation: hexData[i].rotation, gradient: '70-#004838-#028151', stroke: '#CFD4D7', 'stroke-width': 5, cursor: 'pointer' }); 

    var hexText = paper.text(hexData[i].xPos, hexData[i].yPos, hexData[i].text); 
    hexText.attr({fill: '#fff', 'font-size': 10, 'font-family': 'Arial', cursor: 'pointer'}); 

    hexArray[i] = paper.set(); 
    hexArray[i].push(hex, hexText).hover(hexHoverIn, hexHoverOut); 
} 

Answer 1

로 표시 내 바이올린 http://jsfiddle.net/m4Z2K/를 참조하십시오 대부분 내 변화는 올바른 효과 저쪽이 원하는 :)

같습니다

1.Declare 해시 맵 당신을위한 루프 전에 이 모든 경로 객체

var hexObjectMap ={}; // maintain a hashmap for all the path object 

구석 구석을 (Element.data에 대한 documentation() API 세부 사항을 참조) 데이터를 저장하는 것입니다() 각

hex.data('key',i); // save a identifier in each object 

3 개체의 ID를 저장합니다. 진수가

hexObjectMap[i] = hex; // save each path object to map 

4.In hexHoverIn()와 hexHoverOut을 (를 만든 후,)지도에서 경로 객체를 저장 경로 객체 사용됩니다 객체 (이에서 ID를 얻을 r은 현재에 가져가)

var key = this.data('key'); // retrieve the 'key' in this path object 

및 hexObjectMap와 진수 교체 [키] 단지 당신이 마지막으로 만든 경로 객체에 대한 참조를 유지 진수때문이다.

hexObjectMap[key].attr({fill:'#00411a'}); 

향후 질문이 있으면 알려주세요.