javascript - 在 Raphael.js 中查看鼠标悬停的文本

Question

我有一些 Rapahel 圆圈，当我将鼠标悬停在它们上面时，我需要查看它们上面的一些文字。这是我的代码：

var text = R.text(X, Y, "some text");
R.circle(X, Y, 10).attr({"fill-opacity":0.8, fill:color, stroke: "white"})
        .mouseover(function () {
                this.animate({"fill-opacity": 1, 'transform':"s2 2"}, 500);}
            txt.show();
        })
        .mouseout(function () {
            this.animate({"fill-opacity": 0.8, 'transform':"s0.5 0.5"}, 500);}
            txt.hide();
        });

X 和 Y 是在一个循环中计算的，该循环在屏幕上形成几个圆圈。问题是文本显示总是最后一个，位置也是固定的。如何使此代码正常工作并将单个文本绑定到每个圆圈？

Answer 1

尝试这个

var circle = R.circle(X, Y, 10).attr({"fill-opacity":0.8, fill:color, stroke: "white"});

circle.txt = R.text(circle.attr('x'), circle.attr('y'), "some text");

circle.mouseover(function () {
                  this.animate({"fill-opacity": 1, 'transform':"s2 2"}, 500);}
              this.txt.show();
          })
          .mouseout(function () {
              this.animate({"fill-opacity": 0.8, 'transform':"s0.5 0.5"}, 500);}
              this.txt.hide();
          });