CODEWITHSUNDEEP
javascriptjqueryraphael
Katie
Katie

Reputation: 48228

Raphael: Chaining ".data" to a raphael.js element

I'm having trouble chaining ".data" to a raphael.js element.

When I try to retrieve the data later, I get "undefined".

Here's my fiddle: http://jsfiddle.net/HkNgT/9/ 

//Draw:
paper.circle(circleCenterX, circleCenterY, circleCenterRadius)
    .attr({'fill':'blue', 'stroke':'red', 'stroke-width':2, 'opacity': 0.8}) 
    .data({"circleCenterX":circleCenterX, 
           "circleCenterY":circleCenterY, 
           "boxYPosition":boxYPosition, 
           "boxXPosition":boxXPosition})
    .id = name+"-circle";

//Output:
    console.log("data is = ", paper.getById(name+"-circle").data("circleCenterX"));

With this code, the ".data(...)" part just doesn't work.

When I try to retrieve it (with paper.getById), it displays "data is = undefined".

Other ways that I have tried:

    //Doesn't work
    paper.circle....
    .data("circleCenterX",circleCenterX)
    .data("circleCenterY",circleCenterY)
    .data("boxYPosition",boxYPosition)
    .data("boxXPosition",boxXPosition);

And another:

    //Doesn't work
    var c = paper.circle....;
    c.data("circleCenterX",circleCenterX);
    c.data("circleCenterY",circleCenterY);
    c.data("boxYPosition",boxYPosition);
    c.data("boxXPosition",boxXPosition);

And another:

    //DOES work, but gives me huge performance losses
    paper.circle....;
    paper.getById(name+"-circle").data("circleCenterX",circleCenterX);
    paper.getById(name+"-circle").data("circleCenterY",circleCenterY);
    paper.getById(name+"-circle").data("boxYPosition",boxYPosition);
    paper.getById(name+"-circle").data("boxXPosition",boxXPosition);

Any help?

Upvotes: 0

Views: 127

Answers (1)

Nick Grealy
Nick Grealy

Reputation: 25872

So, just trying to help, I've never used raphael before. I assume you're trying to retrieve the circleCenterX value?

Inspecting the data function, it looks as though it's only used for setting the value. (It only returns a value, if you're setting a value).

function (b,c){
    var d = bb[this.id] = bb[this.id] || {};
    if(arguments.length==1){
        if(a.is(b,"object")){
            for(var e in b)b[g](e)&&this.data(e,b[e]);
            return this
        }
        eve("raphael.data.get."+this.id,this,d[b],b);
        return d[b]
    }
    d[b]=c,eve("raphael.data.set."+this.id,this,c,b);
    return this
}

(Afaict, eve is an Event framework, bundled with Raphael. Anyone know where the data goes from here?)

So this isn't going to help.

Inspecting the circle object, I was able to see/pull out a cx value, which I assume is the circleCenterX value that you're looking for...

var circ = paper.getById(name+"-circle");
console.log("baseVal is = ", circ[0].cx.baseVal.value);
console.log("animVal is = ", circ[0].cx.animVal.value);

Gives

baseVal is =  100
animVal is =  100

Is this what you're looking for?

Upvotes: 1

Related Questions