Making lines with SVG and JavaScript

I just started trying out SVG the other day. Eventually I hope to be able to know how to do what SE does with their reputation graphs.

For now, I've just been trying to set up an easier way to make lines. I think my below code is decent, but please let me know what I can improve on or what I'm doing poorly.

Would like your thoughts before I start adding like animations, creativity, data to it.

var Line = {};

Line.LINES = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

var SVGline = function (l) {
this.l = l;
}

for (var i = Line.LINES.length; i > -1; i -= 1) {
Line[Line.LINES[i]] = new SVGline(Line.LINES[i]);
}

SVGline.prototype.createline = function (x1, y1, x2, y2, color, w) {
var aLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
aLine.setAttribute('x1', x1);
aLine.setAttribute('y1', y1);
aLine.setAttribute('x2', x2);
aLine.setAttribute('y2', y2);
aLine.setAttribute('stroke', color);
aLine.setAttribute('stroke-width', w);
return aLine;
}

function start() {
var aSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
aSvg.setAttribute('width', 1000);
aSvg.setAttribute('height', 400);
var w = document.getElementById('container');

for (var i = 1; i < 11; i += 1) {
var x1 = Math.floor(Math.random() * 500 / 2);
var xx = Line[i].createline(x1, 0, 200, 300, 'rgb(0,0,' + x1 + ')', i);
aSvg.appendChild(xx);
}
w.appendChild(aSvg);
}

start();

• Just to help you out to see how other people are creating SVG renderers you might want to check out TWO.js. That library has a very nice way of handling 2D rendering. Hope that helps:) – tkellehe Dec 19 '15 at 5:19

Let me know what I can improve on or what I'm doing poorly.

If you are going to do animations with those lines, you will want to keep track of them. I am assuming that is why you have an array of LINES. However, in createLine you create the SVG element and just return it, you do not keep a reference to it. So it will be hard to animate those lines, you would have to query the DOM to find them back.

I suggest you have an object that creates SVG elements, a factory so to speak. And then another object that tracks lines you have created so far, mostly to do animations and other fun stuff.

The factory object could be something like

SVG = {
createCanvas : function( width, height, containerId ){
var container = document.getElementById( containerId );
var canvas = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
container.appendChild( canvas );
return canvas;
},
createLine : function (x1, y1, x2, y2, color, w) {
var aLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
aLine.setAttribute('x1', x1);
aLine.setAttribute('y1', y1);
aLine.setAttribute('x2', x2);
aLine.setAttribute('y2', y2);
aLine.setAttribute('stroke', color);
aLine.setAttribute('stroke-width', w);
return aLine;
}
}


Initially the lines object could be as simple as

var lines = [];
lines.addLine = function( line ){
this.push( line );
return line;
}


Your start function would then be something like

function start() {
var canvas = SVG.createCanvas( 1000 , 400 , 'container' ),
lineElement, i, x1;

for (i = 1; i < 11; i += 1) {
x1 = Math.floor(Math.random() * 500 / 2),
lineElement = lines.addLine( SVG.createLine(x1, 0, 200, 300, 'rgb(0,0,' + x1 + ')', i) );
canvas.appendChild( lineElement );
}
}

• Being new to SVG , I am just starting to learn ways to create a line with JavaScript and @konjin's code looks great. But there is a typo error in the for loop: createline should be createLine. I noticed it when running your code. – user92598 Dec 18 '15 at 5:33
• lines.addLine = … looks weird. This makes it difficult to iterate over the array. The code can be made clearer without that function. – Roland Illig Nov 18 '16 at 7:49
• What are your reasons for sometimes having a space inside parentheses and sometimes not? – Roland Illig Nov 18 '16 at 7:51