Raphaël.js，一条路径上的事件触发另一条路径上的事件

Question

我有一条道路，当我被碾过时，我想要另一条道路的动画发生。你可以看到下面的图片。当用户在一个区域上空盘旋时，我希望白点能够生成动画。

代码示例：

for (key in regionsConfig) {
paper.setStart();
paper
    .path(regionsConfig[key].path)
    .attr(regionsConfig[key].attrs)
    .data('url', regionsConfig[key].url)
    .data('fill', regionsConfig[key].attrs.fill);
paper.circle(regionsConfig[key].circle.x, regionsConfig[key].circle.y, 4).attr({ fill: '#fff', 'stroke-width': 0 });
switch (key) {
    case 'nRegion':
        shapes[key] = paper.text(220, 75, 'Northern').attr({fill: '#fff', 'font-size': 40, 'font-family': 'GarageGothic Regular'});
        break;
    case 'nwRegion':
        shapes[key] = paper.text(80, 420, 'Northern Western').attr({fill: '#5e2b12', 'font-size': 40, 'font-family': 'GarageGothic Regular'});
        break;
    case 'ncRegion':
        shapes[key] = paper.text(340, 230, 'Northern Central').attr({fill: '#fff', 'font-size': 40, 'font-family': 'GarageGothic Regular'});
        break;
    case 'cRegion':
        shapes[key] = paper.text(280, 380, 'Central').attr({fill: '#fff', 'font-size': 40, 'font-family': 'GarageGothic Regular'});
        break;
    case 'sRegion':
        shapes[key] = paper.text(250, 580, 'Southern').attr({fill: '#5e2b12', 'font-size': 40, 'font-family': 'GarageGothic Regular'});
        break;
}
shapes[key] = paper.setFinish();
console.log(shapes[key]);
shapes[key].click(function() {
    console.log(this);
    this.attr({fill: 'black'});
});
shapes[key].mouseover(function() {
    this.animate({
        fill: '#337891',
        'stroke-width': 3
    }, 500);
});
shapes[key].mouseout(function() {
    this.animate({
        fill: this.data('fill'),
        'stroke-width': 1
    }, 500);
});

Answer 1

编辑：首先错过你的设置，但我认为你可能仍然需要一个闭包用于set或circle，所以hover funcs知道它们在循环之后引用了什么，所以未经测试的代码/ psuedocode类似于..

...loop

(function() {

     var dot = paper.circle(regionsConfig[key].circle.x, regionsConfig[key].circle.y, 4).attr({ fill: '#fff', 'stroke-width': 0 });

     ...

    shapes[ key ].mouseover(function() {
         dot.animate({
             fill: '#337891',
             'stroke-width': 3
         }, 500);

     });
    shapes[ key ].mouseout(function() {
        dot.animate({
            fill: this.data('fill'),
            'stroke-width': 1
        }, 500);

    });
})();

...endloop

如果你需要，你可以把它放在一个jsfiddle上，如果你没有用上述方法管理它应该是可行的。

编辑：不太确定我没有小提琴我的封口，但希望你能得到全面的想法。