Raphaelでホバーイベントをパスのセットに適用する

Question

ホグラバーセットにホバーイベントを置くと、efectはすべての異なるパスに適用されます。したがって、パスを渡すと、セット全体の塗りつぶしではなく、その単一のパスの塗りつぶしが同時に変更されます。

たとえば、このマップでは、マウスでカナダを通過すると本土の色は変わりますが、すべての氷の島は同じ色のままです。

これは私のコードです。

drawSets: function(){ 
    for (country in this.setsArr){ 
     var setset= R.set(); 
     var zone = this.setsArr[country]; 
     for (group in zone){ 
      var path = R.path(this.setsArr[country][group].path); 

      setset.push(
       path 
      ); 
     } 

     var attri = this.options.attributes; 
     setset.attr(attri); 
     var x = this.setsArr[country].translate.x; 
     var y = this.setsArr[country].translate.y; 
     setset.translate(x,y); 

     setset.hover(function(){ 
      this.animate({ 
       fill: '#000' 
      }, 300); 
     }, function(){ 
     this.animate({ 
      fill: attributes.fill 
     }, 300); 
    }); 

    } 
}, 

私はRaphaelsアニメーションメソッドを使用しています。

この問題を解決するにはどうすればよいですか？ここで

は全体のアプリのファイルは

http://www.megaupload.com/?d=GHQ5HATI

そして、ここではこの1つを含む別の質問です...です。

Can someone clarify Raphael's documentation? (or know a place in which someone already has done it)

Answer 1

これは、あなたが強調するために使用しているイベントは、あなたがそれだと思うオブジェクトを参照されていない年齢古い問題があります。特にこのの参照。

これは深夜です。私は疲れており、あなたのコードを乱してしまいました。ここで私は何をしたのですか

パスのセットをラップするオブジェクトを作成し、設定されたオブジェクトを参照するようにmouseoverイベントを設定します。ここでの魔法は、オブジェクト変数への参照を使用することによってイベントがロックされ、すべてが機能することです。

So.オブジェクトを呼び起こす。私はカナダのためにこれをやった：私は

drawSets: function(){ 
    for (country in this.setsArr){ 
     var setset= R.set(); 
        var holderObj = null; 
        // 
        // Create an object to hold all my paths 
        // 
        if (country == 'canada') 
        { 
         holderObj = setObj (country, setset); 
        } 
     var zone = this.setsArr[country]; 
     for (group in zone){ 
      var path = R.path(this.setsArr[country][group].path); 

      setset.push(path); 
          if (country == 'canada') 
          { 
           // add the path to the holder obj 
           holderObj.addPath(path); 
          } 
     } 

        if (country == 'canada') 
        { 
         // once all paths for the object are loaded, create a mouseover 
         // event 
         holderObj.setupMouseover(); 
        } 

     var attri = this.options.attributes; 
     setset.attr(attri); 
     var x = this.setsArr[country].translate.x; 
     var y = this.setsArr[country].translate.y; 
     setset.translate(x,y); 



    } 
} 

関数drawSets（ライン80）に続いてmapclasses.js

function setObj(country,myset) 
{ 
    var that = this; 
    that.country = country; 
    that.myset = R.set(); 

    that.setupMouseover = function() 
    { 
     that.myset.mouseover(function(event){ 
      myvar = that; 
      // in the mouseover, we're referring to a object member that.myset 
      // the value is locked into the anonymous object 
      that.myset.attr({"fill":"#ffaa00"}); 
     }); 
    } 

    that.addPath = function(newpath) 
    { 
     that.myset.push(newpath); 
    } 

    return that; 
} 

の上部に注意をそれを置きます。また、私はマウスオーバーを適用しただけです。関連するmouseoutを適用するのは簡単なことです。また、各国のためのオブジェクトが必要です。これは、おそらく保存したいと思うでしょう。

申し訳ありませんが、これは明確ではありません。私が言ったように、それは遅れている。必要ならば、私はあなたに変更されたjsファイルを送ったり、dropboxに張ったりできますが、おそらくStackOverflowの精神に反するでしょう。

これに問題がある場合は、遠慮なく私は手伝ってください。

幸運のベスト。