Question

I have a list of json objects.

var Planets = [
            {name:"maths", percComp: "2", preReq: "english"},
            {name:"english", percComp: "20", preReq: "geog"},
            {name:"geog", percComp: "57", preReq: "maths"}          
        ];

These objects are planets that i will add to a universe. They are school subjects

I also have a planet class

function Planet(planet, index)
    {
        this.name = planet.name;
        this.percComp = planet.percComp;
        this.preReq = planet.preReq;
        CreatePlanet(this, index);
        this.line = paper.path('');

        function RedrawLine(planetFrom, planetTo, strokeWidth)
        {
            line.attr({
                path:"M" + planetFrom.attrs.cx + "," + planetFrom.attrs.cy + "L"+ planetTo.attrs.cx + "," + planetTo.attrs.cy,
                "stroke-width": strokeWidth
            }); 
        }

        function CreatePlanet(planet)
        {
            var planetName = planet.name;
            planetName = paper.circle(200 * index, 100, 80/index);
            planetName.attr({ 
                fill:'red',
                stroke: '#3b4449',
                'stroke-width': 6               
            });

            SetGlow(30, true, 0, 0, 'grey', planetName)
            SetHover(planetName);
        }

        function SetHover(planet)
        {
            var radius = planet.attrs.r;
            planet.mouseover(function(){
                this.animate({ r: radius * 1.3}, 150)
            }).mouseout(function(){
                this.animate({ r: radius}, 150)
            })
        }

        function SetGlow(width, fill, offSetx, offsety, color, planet)
        {
            planet.glow({
                width: 30,
                fill: true,
                offsetx: 0,
                offsety: 0,
                color: 'grey'
            });
        }

    }

The code to initiate the program is

var element = document.getElementById('Main-Content')
var paper = new Raphael(element, 1000, 1000);


    window.onload = function()
    {

        var planetsSet = paper.set();

        var index = 1;
        $(jQuery.parseJSON(JSON.stringify(Planets))).each(function(){
            var planet = new Planet(this, index);
            planetsSet.push(planet);
            index++;
        });

        for (i=0; i<planetsSet.length; i++)
        {
            var planetTo = planetsSet[i];
                            // This is a test to see if RedrawLine works
                            var planeFrom = planetsFrom[i+1];
            planetTo.RedrawLine(planetTo, planeFrom, 30)
            var preReq = this.preReq;          
        }
    }

The code populates the screen with 3 planets. I am trying to connect these with a line. The line will connect a planet with its pre requisite that is declared in the json object. So maths has a pre requisite english, and english has a pre requisite geog. I have a function in the Planet class that will draw the line, but I cant access the objects after they have been drawn.

Is this a problem with Raphael or can it be done?

Answer 1

several errors in your approach:

• Paper.set is not Array, use Array for such purpse
• you messed scopes, pass paper to your object constructor
• public methods should be declared at least as this.method not just function method()
• keep a public properties of your planet in this.property object or at least not call this.planet as PlanetName.
• you forget to use this.line in your redraw method

little code to fill the void:

var planetsSet = [];

working sample

homework:

Remove planetFrom from RedrawLine method parameters, to be possible call this method as
PlanetFrom.RedrawLine(planetTo);