svg-graph-builder

Simple tool to quickly build an SVG grid/graph using method chaining.

Getting Started

const graph = Graph.newGraph('root');

Set SVG dimensions

graph.width(250).height(250);

Set the number of grid lines (horizontal, vertical)

graph.gridSize(10,10);

Draw axes

graph.drawAxes()

Build the graph!

graph.build();

Finished graph:

Alternatively, you could have built the whole thing using one string of methods:

graph.width(250).height(250).gridSize(10,10).buildGrid().drawAxes();

Extra features

You can also use the following functions:

graph.appendSingleLine(attrs);
graph.appendPath(attrs);

The attrs parameter is an object that contains key-value pairs of all the attributes you want to pass in. For example,

const attrs = {
    d: 'M0 50 H 250',
    stroke:'red',
    'stroke-width': 2
};
graph.appendPath(attrs);

will result in,

Notice that you need to wrap quotes around attribute properties that have hyphens in their name.

Conclusion!

It's very minimal right now, but it's a nice way to see how easy it is to use method chaining to add SVG elements to the DOM.