javascript - 使用 "attr"与 "animate"使用节点 ID 更改 Raphael 对象

Question

我正在构建一个应用程序，该应用程序使用 Raphael 根据从 json 提要中读取的值在 map 上绘制圆圈。每个圆节点都有一个 ID，然后我用它来调用它并更改它的属性。选择一个新变量会改变圆圈的大小和颜色。我可以使用 JQuery 的 attr 方法更改大小，但不能设置动画。

我已经为每个圈子分配了一个 ID:

circle.raphael.node.id = [thisCircle]

我可以使用属性方法改变每个圆圈的大小和颜色，因此:

$(thisCircle).attr({
r : [new radius]
fill : [new color]
});

但我无法使用 JQuery 的动画方法为其设置动画:

$(thisCircle).animate({
r : [new radius],
fill : [new color]
}, 200);

我错过了什么？

Answer 1

你为什么不通过它自己的 animate 为 raphael 对象设置动画呢？方法？ :

circle.animate({
    r : newRadius,
    fill : newColor
},200);

这是一个展示如何为拉斐尔圆形对象设置动画的演示:

http://jsfiddle.net/gion_13/MpjGJ/

.
在同一个演示中，您会看到我添加了一个不必要的迷你 jquery 插件，它可以让您通过 native jquery 动画方法为 raphael svg 对象设置动画，就像这样:

$('#the-id-of-the-svg-node').animate({
    r : newRadius,
    fill : newColor
},200);