我当前的项目是美国的热点地图:
http://up.massrelevance.com/cnbc/top-states/heatmap.html
它是在Raphael和几个预先打包的库的帮助下渲染的,以生成状态的路径。在代码的某个时刻,我生成了一个对表示每个状态的Raphael对象的引用数组;然后遍历它们,使用Raphael的projection.map
方法将点击处理程序附加到每个处理程序(实际的Raphael对象存储在.click()
中):
Heatmap.prototype.stateClick = function() {
var projection,
state,
_this = this;
for (state in this.projections) {
projection = this.projections[state];
console.log(state);
console.log(projection.map[0]);
(function(state, projection) {
projection.map.click(function() {
_this.overlay.update(state, _this.states[state]);
_this.overlay.reveal();
});
})(state, projection);
}
};
这在50个州中的48个州均能正常工作。但是,由于某种原因,阿拉斯加(AK)和俄克拉荷马州(OK)似乎没有获得点击处理程序-也就是说,当我单击它们时,什么也没发生。
看着上面代码中的console.log
调用的控制台,我看不到AK&OK的Raphael对象与其他任何状态的对象之间的任何区别,所以我对原因是困惑的可能是。
任何人都可以确定或猜测正在发生的事情,或者可以建议我如何进一步调试此问题?关于如何绘制这些形状(例如,可能没有完全闭合的路径?),这可能导致点击处理程序无法附加?
Sheesh,想通了。我在阿拉斯加(AK)的州代码中打错了字,而不是使用“确定”。这就解释了为什么这是两个问题状态。我花了一个多小时来研究这个问题,直到休息一下之后,我才有了新鲜的眼睛,立即发现了错字。