Question

I am trying RaphaelJS for drawing graph theory style graphs. For example:

While it is easy to create circles/nodes in RaphaelJS, I haven’t figured out how to associate each node with a label (and having the label inside each node).

Is this feasible with RaphaelJS?

Answer 1

I’d write a little bit of code to manage a series of such nodes using default styles, allowing for overrides as desired.

// "Constructor" -- accepts a Raphael paper to use as background object and default values for node radius, node style, and label style.
function NodeManager( paper, node_radius, node_style, label_style )
{
    this.paper = paper;
    this.nodes = {};
    this.node_radius = node_radius || 24;
    this.node_style = node_style || { fill: 'white', stroke: 'black', 'stroke-width': 3 };
    this.label_style = label_style || { fill: 'black', stroke: 'none', 'font-family': 'Arial,Helvetica,sans-serif', 'font-size': 32, 'font-weight': 600 };
}

// Add a node to the paper.  
// Code is an arbitrary or symbolic name; 
// x and y are the coordinates the node is centered on; 
// label is the node's textual content (no clipping is performed, so be careful!); 
// node_radius, node_style, and label_style are optional, and can be used to override the appearance of this node.
NodeManager.prototype.addNode = function addNode( code, x, y, label, node_radius, node_style, label_style )
{
    var node = this.paper.circle( x, y, node_radius || this.node_radius ).attr( node_style || this.node_style );
    var label_object = this.paper.text( x, y, label ).attr( label_style || this.label_style );
    this.nodes[code] =
        {
            x: x,
            y: y,
            r: node_radius || this.node_radius,
            node: node,
            label: label_object
        };
}

// Connect the nodes corresponding to the two given codes.  connection_style can be used to override the appearance of the connective link, but the default node_style will be used if it isn't specified.
NodeManager.prototype.connectNodes = function connectNodes( code1, code2, connection_style )
{  
    var angle = Math.atan2(this.nodes[code2].y - this.nodes[code1].y, this.nodes[code2].x - this.nodes[code1].x );      //  this will be the angle from point to point
    var inverse_angle = angle + Math.PI;

    ox1 = this.nodes[code1].x + Math.cos( angle ) * this.nodes[code1].r;
    oy1 = this.nodes[code1].y + Math.sin( angle ) * this.nodes[code1].r;

    ox2 = this.nodes[code2].x + Math.cos( inverse_angle ) * this.nodes[code2].r;
    oy2 = this.nodes[code2].y + Math.sin( inverse_angle ) * this.nodes[code2].r;

    var pathstr = "M" + ox1 + "," + oy1 + " L" + ox2 + "," + oy2;

    var path = this.paper.path( pathstr ).attr( connection_style || this.node_style );
}

Check out this fiddle to see a little example of the results.