Question

我正在使用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"]
]

这里，name是县名和两个字母的州名缩写，而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字段未定义。

Answer 1

另一种解决方案：

您可以将 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")); });

Answer 2

我找到了解决方案，并认为将来有人可以使用它。

归结为使用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");

Raphael - 获取ID和路径名称

2 个答案: