悬停在文本上时失去悬停

Question

我试图在 Raphael 中悬停一个带有路径和文本的集合。在悬停时，我只需要更改路径的颜色，而不是文本。目前我的代码不知道哪个集合被悬停并且仅更改数组的最后一个元素。

这可能是一个愚蠢的错误，但我很难过:)

这是我的小提琴：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.在你的for循环之前声明一个hashmap，这是为了保存所有的路径对象

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

2.使用（参见documentation获取Element.data() API详细信息）data()将id保存在每个对象中

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

3.创建hex后将路径对象保存在地图中

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

4.在hexHoverIn()和hexHoverOut()中，从对象中取出id（this将是用户当前悬停的路径对象）

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

并将 hex 替换为 hexObjectMap[key]，因为 hex 仅保留对您创建的最后一个路径对象的引用。

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

如果您有未来的问题，请告诉我，享受吧。