0

我正在使用 Raphael 库构建交互式地图。作为 UI 功能的一部分，我有几个函数将在 mouseover、mouseout 和 onclick 时执行。为此，我必须提取 Raphael 对象中的几个字段。

我有一个在页面加载时加载的 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"]
]

在这里，thename是县名和两个字母的州缩写，id 是该县的 FIPS 编号。这两个字段分别是索引位置 0 和 1。第三个数组是一组线组成的路径来表示县边界。

在鼠标悬停事件中，如何从事件对象中获取元素的名称和 ID？

到目前为止，我有

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

$(hover)允许我在鼠标悬停事件时设置线条颜色和粗细，但为countyName空。

当我在上面的函数中有一个断点时，我可以得到raphaelid元素的 ，这与应该是 id 的 FIPS 编号有很大不同。该name字段未定义。

4

2 回答 2

2

还有另一种解决方案：

您可以分配data("id", id)给您的路径。然后在事件中通过 检索它this.data("id")。

编辑

您可以分配两次数据，它会起作用，看看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"));
});
于 2013-07-08T08:25:05.590 回答
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");
于 2013-07-08T01:57:53.850 回答