Use the singleton instance of this class, $.svg, + to interact with the SVG functionality.
+Expects HTML like:
+<div></div>+ @module SVGManager */ function SVGManager() { this._settings = []; // Settings to be remembered per SVG object this._extensions = []; // List of SVG extensions added to SVGWrapper // for each entry [0] is extension name, [1] is extension class (function) // the function takes one parameter - the SVGWrapper instance this.regional = []; // Localisations, indexed by language, '' for default (English) - this.regional[''] = {errorLoadingText: 'Error loading', - notSupportedText: 'This browser does not support SVG'}; + this.regional[''] = {errorLoadingText: 'Error loading'}; this.local = this.regional['']; // Current localisation this._uuid = new Date().getTime(); - this._renesis = detectActiveX('RenesisX.RenesisCtrl'); + this._ie = !!window.ActiveXObject; } -/* Determine whether a given ActiveX control is available. - @param classId (string) the ID for the ActiveX control - @return (boolean) true if found, false if not */ -function detectActiveX(classId) { - try { - return !!(window.ActiveXObject && new ActiveXObject(classId)); - } - catch (e) { - return false; - } -} - -var PROP_NAME = 'svgwrapper'; - $.extend(SVGManager.prototype, { - /* Class name added to elements to indicate already configured with SVG. */ + /** Class name added to elements to indicate already configured with SVG. */ markerClassName: 'hasSVG', + /** Name of the data property for instance settings. */ + propertyName: 'svgwrapper', - /* SVG namespace. */ + /** SVG namespace. */ svgNS: 'http://www.w3.org/2000/svg', - /* XLink namespace. */ + /** XLink namespace. */ xlinkNS: 'http://www.w3.org/1999/xlink', - /* SVG wrapper class. */ + /** SVG wrapper class. */ _wrapperClass: SVGWrapper, /* Camel-case versions of attribute names containing dashes or are reserved words. */ @@ -82,15 +71,15 @@ $.extend(SVGManager.prototype, { /* Add the SVG object to its container. */ _attachSVG: function(container, settings) { - var svg = (container.namespaceURI == this.svgNS ? container : null); + var svg = (container.namespaceURI === this.svgNS ? container : null); var container = (svg ? null : container); if ($(container || svg).hasClass(this.markerClassName)) { return; } - if (typeof settings == 'string') { + if (typeof settings === 'string') { settings = {loadURL: settings}; } - else if (typeof settings == 'function') { + else if (typeof settings === 'function') { settings = {onLoad: settings}; } $(container || svg).addClass(this.markerClassName); @@ -109,42 +98,7 @@ $.extend(SVGManager.prototype, { this._afterLoad(container, svg, settings || {}); } catch (e) { - if ($.browser.msie) { - if (!container.id) { - container.id = 'svg' + (this._uuid++); - } - this._settings[container.id] = settings; - container.innerHTML = ''; - } - else { - container.innerHTML = '
' + - this.local.notSupportedText + '
'; - } - } - }, - - /* SVG callback after loading - register SVG root. */ - _registerSVG: function() { - for (var i = 0; i < document.embeds.length; i++) { // Check all - var container = document.embeds[i].parentNode; - if (!$(container).hasClass($.svg.markerClassName) || // Not SVG - $.data(container, PROP_NAME)) { // Already done - continue; - } - var svg = null; - try { - svg = document.embeds[i].getSVGDocument(); - } - catch(e) { - setTimeout($.svg._registerSVG, 250); // Renesis takes longer to load - return; - } - svg = (svg ? svg.documentElement : null); - if (svg) { - $.svg._afterLoad(container, svg); - } + $(container).html('SVG is not supported natively on this browser
'); } }, @@ -153,7 +107,7 @@ $.extend(SVGManager.prototype, { var settings = settings || this._settings[container.id]; this._settings[container ? container.id : ''] = null; var wrapper = new this._wrapperClass(svg, container); - $.data(container || svg, PROP_NAME, wrapper); + $.data(container || svg, $.svg.propertyName, wrapper); try { if (settings.loadURL) { // Load URL wrapper.load(settings.loadURL, settings); @@ -170,51 +124,48 @@ $.extend(SVGManager.prototype, { } }, - /* Return the SVG wrapper created for a given container. - @param container (string) selector for the container or - (element) the container for the SVG object or - jQuery collection - first entry is the container - @return (SVGWrapper) the corresponding SVG wrapper element, or null if not attached */ + /** Return the SVG wrapper created for a given container. + @param container {string|Element|jQuery} Selector for the container or + the container for the SVG object or jQuery collection where first entry is the container. + @return {SVGWrapper} The corresponding SVG wrapper element, ornull if not attached. */
_getSVG: function(container) {
- container = (typeof container == 'string' ? $(container)[0] :
- (container.jquery ? container[0] : container));
- return $.data(container, PROP_NAME);
+ return $(container).data(this.propertyName);
},
- /* Remove the SVG functionality from a div.
- @param container (element) the container for the SVG object */
+ /** Remove the SVG functionality from a div.
+ @param container {Element} The container for the SVG object. */
_destroySVG: function(container) {
- var $container = $(container);
- if (!$container.hasClass(this.markerClassName)) {
+ container = $(container);
+ if (!container.hasClass(this.markerClassName)) {
return;
}
- $container.removeClass(this.markerClassName);
- if (container.namespaceURI != this.svgNS) {
- $container.empty();
+ container.removeClass(this.markerClassName).removeData(this.propertyName);
+ if (container[0].namespaceURI !== this.svgNS) {
+ container.empty();
}
- $.removeData(container, PROP_NAME);
},
- /* Extend the SVGWrapper object with an embedded class.
- The constructor function must take a single parameter that is
+ /** Extend the SVGWrapper object with an embedded class.
+ The constructor function must take a single parameter that is a reference to the owning SVG root object. This allows the - extension to access the basic SVG functionality. - @param name (string) the name of the SVGWrapper attribute to access the new class - @param extClass (function) the extension class constructor */ + extension to access the basic SVG functionality.
+ @param name {string} The name of theSVGWrapper attribute to access the new class.
+ @param extClass {function} The extension class constructor. */
addExtension: function(name, extClass) {
this._extensions.push([name, extClass]);
},
- /* Does this node belong to SVG?
- @param node (element) the node to be tested
- @return (boolean) true if an SVG node, false if not */
+ /** Does this node belong to SVG?
+ @param node {Element} The node to be tested.
+ @return {boolean} true if an SVG node, false if not. */
isSVGElem: function(node) {
- return (node.nodeType == 1 && node.namespaceURI == $.svg.svgNS);
+ return (node.nodeType === 1 && node.namespaceURI === $.svg.svgNS);
}
});
-/* The main SVG interface, which encapsulates the SVG element.
- Obtain a reference from $().svg('get') */
+/** The main SVG interface, which encapsulates the SVG element.
+ Obtain a reference from $().svg('get')
+ @module SVGWrapper */ function SVGWrapper(svg, container) { this._svg = svg; // The SVG root node this._container = container; // The containing div @@ -226,28 +177,30 @@ function SVGWrapper(svg, container) { $.extend(SVGWrapper.prototype, { - /* Retrieve the width of the SVG object. */ - _width: function() { + /** Retrieve the width of the SVG object. + @return {number} The width of the SVG canvas. */ + width: function() { return (this._container ? this._container.clientWidth : this._svg.width); }, - /* Retrieve the height of the SVG object. */ - _height: function() { + /** Retrieve the height of the SVG object. + @return {number} The height of the SVG canvas. */ + height: function() { return (this._container ? this._container.clientHeight : this._svg.height); }, - /* Retrieve the root SVG element. - @return the top-level SVG element */ + /** Retrieve the root SVG element. + @return {SVGElement} The top-level SVG element. */ root: function() { return this._svg; }, - /* Configure a SVG node. - @param node (element, optional) the node to configure - @param settings (object) additional settings for the root - @param clear (boolean) true to remove existing attributes first, - false to add to what is already there (optional) - @return (SVGWrapper) this root */ + /** Configure a SVG node. + @param [node] {SVGElement} The node to configure, or the SVG root if not specified. + @param settings {object} Additional settings for the root. + @param [clear=false] {boolean}true to remove existing attributes first,
+ false to add to what is already there.
+ @return {SVGWrapper} This wrapper. */
configure: function(node, settings, clear) {
if (!node.nodeName) {
clear = settings;
@@ -257,8 +210,8 @@ $.extend(SVGWrapper.prototype, {
if (clear) {
for (var i = node.attributes.length - 1; i >= 0; i--) {
var attr = node.attributes.item(i);
- if (!(attr.nodeName == 'onload' || attr.nodeName == 'version' ||
- attr.nodeName.substring(0, 5) == 'xmlns')) {
+ if (!(attr.nodeName === 'onload' || attr.nodeName === 'version' ||
+ attr.nodeName.substring(0, 5) === 'xmlns')) {
node.attributes.removeNamedItem(attr.nodeName);
}
}
@@ -269,17 +222,17 @@ $.extend(SVGWrapper.prototype, {
return this;
},
- /* Locate a specific element in the SVG document.
- @param id (string) the element's identifier
- @return (element) the element reference, or null if not found */
+ /** Locate a specific element in the SVG document.
+ @param id {string} The element's identifier.
+ @return {SVGElement} The element reference, or null if not found. */
getElementById: function(id) {
return this._svg.ownerDocument.getElementById(id);
},
- /* Change the attributes for a SVG node.
- @param element (SVG element) the node to change
- @param settings (object) the new settings
- @return (SVGWrapper) this root */
+ /** Change the attributes for a SVG node.
+ @param element {SVGElement} The node to change.
+ @param settings {object} The new settings.
+ @return {SVGWrapper} This wrapper. */
change: function(element, settings) {
if (element) {
for (var name in settings) {
@@ -294,7 +247,12 @@ $.extend(SVGWrapper.prototype, {
return this;
},
- /* Check for parent being absent and adjust arguments accordingly. */
+ /** Check for parent being absent and adjust arguments accordingly.
+ @private
+ @param values {string[]} The given parameters.
+ @param names {string[]} The names of the parameters in order.
+ @param optSettings {string[]} The names of optional parameters.
+ @return {object} An object representing the named parameters. */
_args: function(values, names, optSettings) {
names.splice(0, 0, 'parent');
names.splice(names.length, 0, 'settings');
@@ -303,7 +261,7 @@ $.extend(SVGWrapper.prototype, {
if (values[0] != null && values[0].jquery) {
values[0] = values[0][0];
}
- if (values[0] != null && !(typeof values[0] == 'object' && values[0].nodeName)) {
+ if (values[0] != null && !(typeof values[0] === 'object' && values[0].nodeName)) {
args['parent'] = null;
offset = 1;
}
@@ -312,7 +270,7 @@ $.extend(SVGWrapper.prototype, {
}
if (optSettings) {
$.each(optSettings, function(i, value) {
- if (typeof args[value] == 'object') {
+ if (typeof args[value] === 'object') {
args.settings = args[value];
args[value] = null;
}
@@ -321,11 +279,11 @@ $.extend(SVGWrapper.prototype, {
return args;
},
- /* Add a title.
- @param parent (element or jQuery) the parent node for the new title (optional)
- @param text (string) the text of the title
- @param settings (object) additional settings for the title (optional)
- @return (element) the new title node */
+ /** Add a title.
+ @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified.
+ @param text {string} The text of the title.
+ @param [settings] {object} Additional settings for this node.
+ @return {SVGElement} The new title node. */
title: function(parent, text, settings) {
var args = this._args(arguments, ['text']);
var node = this._makeNode(args.parent, 'title', args.settings || {});
@@ -333,11 +291,11 @@ $.extend(SVGWrapper.prototype, {
return node;
},
- /* Add a description.
- @param parent (element or jQuery) the parent node for the new description (optional)
- @param text (string) the text of the description
- @param settings (object) additional settings for the description (optional)
- @return (element) the new description node */
+ /** Add a description.
+ @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified.
+ @param text {string} The text of the description.
+ @param [settings] {object} Additional settings for this node.
+ @return {SVGElement} The new description node. */
describe: function(parent, text, settings) {
var args = this._args(arguments, ['text']);
var node = this._makeNode(args.parent, 'desc', args.settings || {});
@@ -345,168 +303,162 @@ $.extend(SVGWrapper.prototype, {
return node;
},
- /* Add a definitions node.
- @param parent (element or jQuery) the parent node for the new definitions (optional)
- @param id (string) the ID of this definitions (optional)
- @param settings (object) additional settings for the definitions (optional)
- @return (element) the new definitions node */
+ /** Add a definitions node.
+ @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified.
+ @param [id] {string} The ID of this definitions (optional).
+ @param [settings] {object} Additional settings for this node.
+ @return {SVGElement} The new definitions node. */
defs: function(parent, id, settings) {
var args = this._args(arguments, ['id'], ['id']);
- return this._makeNode(args.parent, 'defs', $.extend(
- (args.id ? {id: args.id} : {}), args.settings || {}));
- },
-
- /* Add a symbol definition.
- @param parent (element or jQuery) the parent node for the new symbol (optional)
- @param id (string) the ID of this symbol
- @param x1 (number) the left coordinate for this symbol
- @param y1 (number) the top coordinate for this symbol
- @param width (number) the width of this symbol
- @param height (number) the height of this symbol
- @param settings (object) additional settings for the symbol (optional)
- @return (element) the new symbol node */
+ return this._makeNode(args.parent, 'defs', $.extend((args.id ? {id: args.id} : {}), args.settings || {}));
+ },
+
+ /** Add a symbol definition.
+ @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified.
+ @param id {string} The ID of this symbol.
+ @param x1 {number} The left coordinate for this symbol.
+ @param y1 {number} The top coordinate for this symbol.
+ @param width {number} The width of this symbol.
+ @param height {number} The height of this symbol.
+ @param [settings] {object} Additional settings for this node.
+ @return {SVGElement} The new symbol node. */
symbol: function(parent, id, x1, y1, width, height, settings) {
var args = this._args(arguments, ['id', 'x1', 'y1', 'width', 'height']);
return this._makeNode(args.parent, 'symbol', $.extend({id: args.id,
- viewBox: args.x1 + ' ' + args.y1 + ' ' + args.width + ' ' + args.height},
- args.settings || {}));
- },
-
- /* Add a marker definition.
- @param parent (element or jQuery) the parent node for the new marker (optional)
- @param id (string) the ID of this marker
- @param refX (number) the x-coordinate for the reference point
- @param refY (number) the y-coordinate for the reference point
- @param mWidth (number) the marker viewport width
- @param mHeight (number) the marker viewport height
- @param orient (string or int) 'auto' or angle (degrees) (optional)
- @param settings (object) additional settings for the marker (optional)
- @return (element) the new marker node */
+ viewBox: args.x1 + ' ' + args.y1 + ' ' + args.width + ' ' + args.height}, args.settings || {}));
+ },
+
+ /** Add a marker definition.
+ @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified.
+ @param id {string} The ID of this marker.
+ @param refX {number} The x-coordinate for the reference point.
+ @param refY {number} The y-coordinate for the reference point.
+ @param mWidth {number} The marker viewport width.
+ @param mHeight {number} The marker viewport height.
+ @param [orient] {string|number} 'auto' or angle (degrees).
+ @param [settings] {object} Additional settings for this node.
+ @return {SVGElement} The new marker node. */
marker: function(parent, id, refX, refY, mWidth, mHeight, orient, settings) {
- var args = this._args(arguments, ['id', 'refX', 'refY',
- 'mWidth', 'mHeight', 'orient'], ['orient']);
+ var args = this._args(arguments, ['id', 'refX', 'refY', 'mWidth', 'mHeight', 'orient'], ['orient']);
return this._makeNode(args.parent, 'marker', $.extend(
{id: args.id, refX: args.refX, refY: args.refY, markerWidth: args.mWidth,
markerHeight: args.mHeight, orient: args.orient || 'auto'}, args.settings || {}));
},
- /* Add a style node.
- @param parent (element or jQuery) the parent node for the new node (optional)
- @param styles (string) the CSS styles
- @param settings (object) additional settings for the node (optional)
- @return (element) the new style node */
+ /** Add a style node.
+ @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified.
+ @param styles {string} The CSS styles.
+ @param [settings] {object} Additional settings for this node.
+ @return {SVGElement} The new style node. */
style: function(parent, styles, settings) {
var args = this._args(arguments, ['styles']);
- var node = this._makeNode(args.parent, 'style', $.extend(
- {type: 'text/css'}, args.settings || {}));
+ var node = this._makeNode(args.parent, 'style', $.extend({type: 'text/css'}, args.settings || {}));
node.appendChild(this._svg.ownerDocument.createTextNode(args.styles));
- if ($.browser.opera) {
- $('head').append('');
- }
return node;
},
- /* Add a script node.
- @param parent (element or jQuery) the parent node for the new node (optional)
- @param script (string) the JavaScript code
- @param type (string) the MIME type for the code (optional, default 'text/javascript')
- @param settings (object) additional settings for the node (optional)
- @return (element) the new script node */
+ /** Add a script node.
+ @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified.
+ @param script {string} The JavaScript code.
+ @param [type='text/javascript'] {string} The MIME type for the code.
+ @param [settings] {object} Additional settings for this node.
+ @return {SVGElement} The new script node. */
script: function(parent, script, type, settings) {
var args = this._args(arguments, ['script', 'type'], ['type']);
var node = this._makeNode(args.parent, 'script', $.extend(
{type: args.type || 'text/javascript'}, args.settings || {}));
node.appendChild(this._svg.ownerDocument.createTextNode(args.script));
- if (!$.browser.mozilla) {
+ if ($.svg._ie) {
$.globalEval(args.script);
}
return node;
},
- /* Add a linear gradient definition.
- Specify all of x1, y1, x2, y2 or none of them.
- @param parent (element or jQuery) the parent node for the new gradient (optional)
- @param id (string) the ID for this gradient
- @param stops (string[][]) the gradient stops, each entry is
- [0] is offset (0.0-1.0 or 0%-100%), [1] is colour,
- [2] is opacity (optional)
- @param x1 (number) the x-coordinate of the gradient start (optional)
- @param y1 (number) the y-coordinate of the gradient start (optional)
- @param x2 (number) the x-coordinate of the gradient end (optional)
- @param y2 (number) the y-coordinate of the gradient end (optional)
- @param settings (object) additional settings for the gradient (optional)
- @return (element) the new gradient node */
+ /** Add a linear gradient definition.
+ Specify all of x1, y1, x2, y2 or none of them.
Specify all of cx, cy, r,
+ fx, fy or none of them.
Specify all of vx, vy, xwidth,
+ vheight or none of them.
Specify all of vx, vy,
+ vwidth, vheight or none of them.
Specify all of x, y, width, height or none of them.
Specify both of rx and ry or neither.
Specify both of x and y or neither of them.
null.
+ @param name {string} The name of the element.
+ @param [settings] {object} Additional settings for this node.
+ @return {SVGElement} The new node. */
_makeNode: function(parent, name, settings) {
parent = parent || this._svg;
var node = this._svg.ownerDocument.createElementNS($.svg.svgNS, name);
for (var name in settings) {
var value = settings[name];
- if (value != null && value != null &&
- (typeof value != 'string' || value != '')) {
+ if (value != null && (typeof value !== 'string' || value !== '')) {
node.setAttribute($.svg._attrNames[name] || name, value);
}
}
@@ -824,21 +784,17 @@ $.extend(SVGWrapper.prototype, {
return node;
},
- /* Add an existing SVG node to the diagram.
- @param parent (element or jQuery) the parent node for the new node (optional)
- @param node (element) the new node to add or
- (string) the jQuery selector for the node or
- (jQuery collection) set of nodes to add
- @return (SVGWrapper) this wrapper */
+ /** Add an existing SVG node to the document.
+ @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified.
+ @param node {SVGElement|string|jQuery} The new node to add or
+ the jQuery selector for the node or the set of nodes to add.
+ @return {SVGWrapper} This wrapper. */
add: function(parent, node) {
- var args = this._args((arguments.length == 1 ? [null, parent] : arguments), ['node']);
+ var args = this._args((arguments.length === 1 ? [null, parent] : arguments), ['node']);
var svg = this;
args.parent = args.parent || this._svg;
args.node = (args.node.jquery ? args.node : $(args.node));
try {
- if ($.svg._renesis) {
- throw 'Force traversal';
- }
args.parent.appendChild(args.node.cloneNode(true));
}
catch (e) {
@@ -852,15 +808,14 @@ $.extend(SVGWrapper.prototype, {
return this;
},
- /* Clone an existing SVG node and add it to the diagram.
- @param parent (element or jQuery) the parent node for the new node (optional)
- @param node (element) the new node to add or
- (string) the jQuery selector for the node or
- (jQuery collection) set of nodes to add
- @return (element[]) collection of new nodes */
+ /** Clone an existing SVG node and add it to the document.
+ @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified.
+ @param node {SVGEelement|string|jQuery} The new node to add or
+ the jQuery selector for the node or the set of nodes to clone.
+ @return {SVGElement[]} The collection of new nodes. */
clone: function(parent, node) {
var svg = this;
- var args = this._args((arguments.length == 1 ? [null, parent] : arguments), ['node']);
+ var args = this._args((arguments.length === 1 ? [null, parent] : arguments), ['node']);
args.parent = args.parent || this._svg;
args.node = (args.node.jquery ? args.node : $(args.node));
var newNodes = [];
@@ -875,20 +830,19 @@ $.extend(SVGWrapper.prototype, {
return newNodes;
},
- /* SVG nodes must belong to the SVG namespace, so clone and ensure this is so.
- @param node (element) the SVG node to clone
- @return (element) the cloned node */
+ /** SVG nodes must belong to the SVG namespace, so clone and ensure this is so.
+ @private
+ @param node {SVGElement} The SVG node to clone.
+ @return {SVGElement} The cloned node. */
_cloneAsSVG: function(node) {
var newNode = null;
- if (node.nodeType == 1) { // element
- newNode = this._svg.ownerDocument.createElementNS(
- $.svg.svgNS, this._checkName(node.nodeName));
+ if (node.nodeType === 1) { // element
+ newNode = this._svg.ownerDocument.createElementNS($.svg.svgNS, this._checkName(node.nodeName));
for (var i = 0; i < node.attributes.length; i++) {
var attr = node.attributes.item(i);
- if (attr.nodeName != 'xmlns' && attr.nodeValue) {
- if (attr.prefix == 'xlink') {
- newNode.setAttributeNS($.svg.xlinkNS,
- attr.localName || attr.baseName, attr.nodeValue);
+ if (attr.nodeName !== 'xmlns' && attr.nodeValue) {
+ if (attr.prefix === 'xlink') {
+ newNode.setAttributeNS($.svg.xlinkNS, attr.localName || attr.baseName, attr.nodeValue);
}
else {
newNode.setAttribute(this._checkName(attr.nodeName), attr.nodeValue);
@@ -902,56 +856,54 @@ $.extend(SVGWrapper.prototype, {
}
}
}
- else if (node.nodeType == 3) { // text
+ else if (node.nodeType === 3) { // text
if ($.trim(node.nodeValue)) {
newNode = this._svg.ownerDocument.createTextNode(node.nodeValue);
}
}
- else if (node.nodeType == 4) { // CDATA
+ else if (node.nodeType === 4) { // CDATA
if ($.trim(node.nodeValue)) {
try {
newNode = this._svg.ownerDocument.createCDATASection(node.nodeValue);
}
catch (e) {
newNode = this._svg.ownerDocument.createTextNode(
- node.nodeValue.replace(/&/g, '&').
- replace(//g, '>'));
+ node.nodeValue.replace(/&/g, '&').replace(//g, '>'));
}
}
}
return newNode;
},
- /* Node names must be lower case and without SVG namespace prefix. */
+ /** Node names must be lower case and without SVG namespace prefix.
+ @private
+ @param name {string} The name to check.
+ @return {string} The corrected name. */
_checkName: function(name) {
- name = (name.substring(0, 1) >= 'A' && name.substring(0, 1) <= 'Z' ?
- name.toLowerCase() : name);
- return (name.substring(0, 4) == 'svg:' ? name.substring(4) : name);
- },
-
- /* Load an external SVG document.
- @param url (string) the location of the SVG document or
- the actual SVG content
- @param settings (boolean) see addTo below or
- (function) see onLoad below or
- (object) additional settings for the load with attributes below:
- addTo (boolean) true to add to what's already there,
- or false to clear the canvas first
- changeSize (boolean) true to allow the canvas size to change,
- or false to retain the original
- onLoad (function) callback after the document has loaded,
- 'this' is the container, receives SVG object and
- optional error message as a parameter
- parent (string or element or jQuery) the parent to load
- into, defaults to top-level svg element
- @return (SVGWrapper) this root */
+ name = (name.substring(0, 1) >= 'A' && name.substring(0, 1) <= 'Z' ? name.toLowerCase() : name);
+ return (name.substring(0, 4) === 'svg:' ? name.substring(4) : name);
+ },
+
+ /** Load an external SVG document.
+ @param url {string} The location of the SVG document or
+ the actual SVG content (starting with '<svg'.
+ @param settings {boolean|function|object} Either addTo below or onLoad below or
+ additional settings for the load with attributes below:
+ addTo {boolean} true to add to what's already there,
+ or false to clear the canvas first,
+ changeSize {boolean} true to allow the canvas size to change,
+ or false to retain the original,
+ onLoad {function} callback after the document has loaded,
+ 'this' is the container, receives SVG object and optional error message as a parameter,
+ parent {string|SVGElement|jQuery} the parent to load into,
+ defaults to top-level svg element.
+ @return {SVGWrapper} This wrapper. */
load: function(url, settings) {
- settings = (typeof settings == 'boolean' ? {addTo: settings} :
- (typeof settings == 'function' ? {onLoad: settings} :
- (typeof settings == 'string' ? {parent: settings} :
- (typeof settings == 'object' && settings.nodeName ? {parent: settings} :
- (typeof settings == 'object' && settings.jquery ? {parent: settings} :
- settings || {})))));
+ settings = (typeof settings === 'boolean' ? {addTo: settings} :
+ (typeof settings === 'function' ? {onLoad: settings} :
+ (typeof settings === 'string' ? {parent: settings} :
+ (typeof settings === 'object' && settings.nodeName ? {parent: settings} :
+ (typeof settings === 'object' && settings.jquery ? {parent: settings} : settings || {})))));
if (!settings.parent && !settings.addTo) {
this.clear(false);
}
@@ -974,7 +926,7 @@ $.extend(SVGWrapper.prototype, {
xml.resolveExternals = false;
xml.async = false;
xml.loadXML(data);
- if (xml.parseError.errorCode != 0) {
+ if (xml.parseError.errorCode !== 0) {
reportError(xml.parseError.reason);
return null;
}
@@ -985,18 +937,17 @@ $.extend(SVGWrapper.prototype, {
if (!data) {
return;
}
- if (data.documentElement.nodeName != 'svg') {
+ if (data.documentElement.nodeName !== 'svg') {
var errors = data.getElementsByTagName('parsererror');
var messages = (errors.length ? errors[0].getElementsByTagName('div') : []); // Safari
- reportError(!errors.length ? '???' :
- (messages.length ? messages[0] : errors[0]).firstChild.nodeValue);
+ reportError(!errors.length ? '???' : (messages.length ? messages[0] : errors[0]).firstChild.nodeValue);
return;
}
var parent = (settings.parent ? $(settings.parent)[0] : wrapper._svg);
var attrs = {};
for (var i = 0; i < data.documentElement.attributes.length; i++) {
var attr = data.documentElement.attributes.item(i);
- if (!(attr.nodeName == 'version' || attr.nodeName.substring(0, 5) == 'xmlns')) {
+ if (!(attr.nodeName === 'version' || attr.nodeName.substring(0, 5) === 'xmlns')) {
attrs[attr.nodeName] = attr.nodeValue;
}
}
@@ -1004,11 +955,8 @@ $.extend(SVGWrapper.prototype, {
var nodes = data.documentElement.childNodes;
for (var i = 0; i < nodes.length; i++) {
try {
- if ($.svg._renesis) {
- throw 'Force traversal';
- }
parent.appendChild(wrapper._svg.ownerDocument.importNode(nodes[i], true));
- if (nodes[i].nodeName == 'script') {
+ if (nodes[i].nodeName === 'script') {
$.globalEval(nodes[i].textContent);
}
}
@@ -1016,6 +964,15 @@ $.extend(SVGWrapper.prototype, {
wrapper.add(parent, nodes[i]);
}
}
+ if (!settings.keepRelativeLinks && url.match('/')) {
+ var base = url.replace(/\/[^\/]*$/, '/');
+ $('*', parent).each(function() {
+ var href = $(this).attr('xlink:href');
+ if (href && !href.match(/(^[a-z][-a-z0-9+.]*:.*$)|(^\/.*$)|(^#.*$)/i)) {
+ $(this).attr('xlink:href', base + href);
+ }
+ });
+ }
if (!settings.changeSize) {
wrapper.configure(parent, {width: size[0], height: size[1]});
}
@@ -1024,13 +981,16 @@ $.extend(SVGWrapper.prototype, {
}
};
if (url.match('false to leave them.
+ @return {SVGWrapper} This wrapper. */
clear: function(attrsToo) {
if (attrsToo) {
this.configure({}, true);
@@ -1061,25 +1021,27 @@ $.extend(SVGWrapper.prototype, {
return this;
},
- /* Serialise the current diagram into an SVG text document.
- @param node (SVG element) the starting node (optional)
- @return (string) the SVG as text */
+ /** Serialise the current diagram into an SVG text document.
+ @param [node] {SVGElement} The starting node, or SVG root if not specified .
+ @return {string} The SVG as text. */
toSVG: function(node) {
node = node || this._svg;
- return (typeof XMLSerializer == 'undefined' ? this._toSVG(node) :
- new XMLSerializer().serializeToString(node));
+ return (typeof XMLSerializer === 'undefined' ? this._toSVG(node) : new XMLSerializer().serializeToString(node));
},
- /* Serialise one node in the SVG hierarchy. */
+ /** Serialise one node in the SVG hierarchy.
+ @private
+ @param node {SVGElement} The current node to serialise.
+ @return {string} The serialised SVG. */
_toSVG: function(node) {
var svgDoc = '';
if (!node) {
return svgDoc;
}
- if (node.nodeType == 3) { // Text
+ if (node.nodeType === 3) { // Text
svgDoc = node.nodeValue;
}
- else if (node.nodeType == 4) { // CDATA
+ else if (node.nodeType === 4) { // CDATA
svgDoc = '';
}
else { // Element
@@ -1087,9 +1049,9 @@ $.extend(SVGWrapper.prototype, {
if (node.attributes) {
for (var i = 0; i < node.attributes.length; i++) {
var attr = node.attributes.item(i);
- if (!($.trim(attr.nodeValue) == '' || attr.nodeValue.match(/^\[object/) ||
+ if (!($.trim(attr.nodeValue) === '' || attr.nodeValue.match(/^\[object/) ||
attr.nodeValue.match(/^function/))) {
- svgDoc += ' ' + (attr.namespaceURI == $.svg.xlinkNS ? 'xlink:' : '') +
+ svgDoc += ' ' + (attr.namespaceURI === $.svg.xlinkNS ? 'xlink:' : '') +
attr.nodeName + '="' + attr.nodeValue + '"';
}
}
@@ -1111,170 +1073,171 @@ $.extend(SVGWrapper.prototype, {
}
});
-/* Helper to generate an SVG path.
- Obtain an instance from the SVGWrapper object.
- String calls together to generate the path and use its value:
- var path = root.createPath();
+/** Helper to generate an SVG path.
+ Obtain an instance from the SVGWrapper object.
+String calls together to generate the path and use its value:
+ @module SVGPath + @example var path = root.createPath(); root.path(null, path.move(100, 100).line(300, 100).line(200, 300).close(), {fill: 'red'}); - or + // or root.path(null, path.move(100, 100).line([[300, 100], [200, 300]]).close(), {fill: 'red'}); */ function SVGPath() { this._path = ''; } $.extend(SVGPath.prototype, { - /* Prepare to create a new path. - @return (SVGPath) this path */ + /** Prepare to create a new path. + @return {SVGPath} This path. */ reset: function() { this._path = ''; return this; }, - /* Move the pointer to a position. - @param x (number) x-coordinate to move to or - (number[][]) x-/y-coordinates to move to - @param y (number) y-coordinate to move to (omitted if x is array) - @param relative (boolean) true for coordinates relative to the current point, - false for coordinates being absolute - @return (SVGPath) this path */ + /** Move the pointer to a position. + @param x {number|number[][]} x-coordinate to move to or x-/y-coordinates to move to. + @param [y] {number} y-coordinate to move to (omitted ifx is array).
+ @param [relative=false] {boolean} true for coordinates relative to the current point,
+ false for coordinates being absolute.
+ @return {SVGPath} This path. */
move: function(x, y, relative) {
- relative = (isArray(x) ? y : relative);
+ relative = ($.isArray(x) ? y : relative);
return this._coords((relative ? 'm' : 'M'), x, y);
},
- /* Draw a line to a position.
- @param x (number) x-coordinate to move to or
- (number[][]) x-/y-coordinates to move to
- @param y (number) y-coordinate to move to (omitted if x is array)
- @param relative (boolean) true for coordinates relative to the current point,
- false for coordinates being absolute
- @return (SVGPath) this path */
+ /** Draw a line to a position.
+ @param x {number|number[][]} x-coordinate to move to or x-/y-coordinates to move to.
+ @param [y] {number} y-coordinate to move to (omitted if x is array).
+ @param [relative=false] {boolean} true for coordinates relative to the current point,
+ false for coordinates being absolute.
+ @return {SVGPath} This path. */
line: function(x, y, relative) {
- relative = (isArray(x) ? y : relative);
+ relative = ($.isArray(x) ? y : relative);
return this._coords((relative ? 'l' : 'L'), x, y);
},
- /* Draw a horizontal line to a position.
- @param x (number) x-coordinate to draw to or
- (number[]) x-coordinates to draw to
- @param relative (boolean) true for coordinates relative to the current point,
- false for coordinates being absolute
- @return (SVGPath) this path */
+ /** Draw a horizontal line to a position.
+ @param x {number|number[]} x-coordinate to draw to or x-coordinates to draw to.
+ @param relative {boolean} true for coordinates relative to the current point,
+ false for coordinates being absolute.
+ @return {SVGPath} This path. */
horiz: function(x, relative) {
- this._path += (relative ? 'h' : 'H') + (isArray(x) ? x.join(' ') : x);
+ this._path += (relative ? 'h' : 'H') + ($.isArray(x) ? x.join(' ') : x);
return this;
},
- /* Draw a vertical line to a position.
- @param y (number) y-coordinate to draw to or
- (number[]) y-coordinates to draw to
- @param relative (boolean) true for coordinates relative to the current point,
- false for coordinates being absolute
- @return (SVGPath) this path */
+ /** Draw a vertical line to a position.
+ @param y {number|number[]} y-coordinate to draw to or y-coordinates to draw to.
+ @param [relative=false] {boolean} true for coordinates relative to the current point,
+ false for coordinates being absolute.
+ @return {SVGPath} This path. */
vert: function(y, relative) {
- this._path += (relative ? 'v' : 'V') + (isArray(y) ? y.join(' ') : y);
+ this._path += (relative ? 'v' : 'V') + ($.isArray(y) ? y.join(' ') : y);
return this;
},
- /* Draw a cubic Bézier curve.
- @param x1 (number) x-coordinate of beginning control point or
- (number[][]) x-/y-coordinates of control and end points to draw to
- @param y1 (number) y-coordinate of beginning control point (omitted if x1 is array)
- @param x2 (number) x-coordinate of ending control point (omitted if x1 is array)
- @param y2 (number) y-coordinate of ending control point (omitted if x1 is array)
- @param x (number) x-coordinate of curve end (omitted if x1 is array)
- @param y (number) y-coordinate of curve end (omitted if x1 is array)
- @param relative (boolean) true for coordinates relative to the current point,
- false for coordinates being absolute
- @return (SVGPath) this path */
+ /** Draw a cubic Bézier curve.
+ @param x1 {number|number[][]} x-coordinate of beginning control point or
+ x-/y-coordinates of control and end points to draw to.
+ @param [y1] {number} y-coordinate of beginning control point (omitted if x1 is array).
+ @param [x2] {number} x-coordinate of ending control point (omitted if x1 is array).
+ @param [y2] {number} y-coordinate of ending control point (omitted if x1 is array).
+ @param [x] {number} x-coordinate of curve end (omitted if x1 is array).
+ @param [y] {number} y-coordinate of curve end (omitted if x1 is array).
+ @param [relative=false] {boolean} true for coordinates relative to the current point,
+ false for coordinates being absolute.
+ @return {SVGPath} This path. */
curveC: function(x1, y1, x2, y2, x, y, relative) {
- relative = (isArray(x1) ? y1 : relative);
+ relative = ($.isArray(x1) ? y1 : relative);
return this._coords((relative ? 'c' : 'C'), x1, y1, x2, y2, x, y);
},
- /* Continue a cubic Bézier curve.
- Starting control point is the reflection of the previous end control point.
- @param x2 (number) x-coordinate of ending control point or
- (number[][]) x-/y-coordinates of control and end points to draw to
- @param y2 (number) y-coordinate of ending control point (omitted if x2 is array)
- @param x (number) x-coordinate of curve end (omitted if x2 is array)
- @param y (number) y-coordinate of curve end (omitted if x2 is array)
- @param relative (boolean) true for coordinates relative to the current point,
- false for coordinates being absolute
- @return (SVGPath) this path */
+ /** Continue a cubic Bézier curve.
+ Starting control point is the reflection of the previous end control point.
+ @param x2 {number|number[][]} x-coordinate of ending control point or + x-/y-coordinates of control and end points to draw to. + @param [y2] {number} y-coordinate of ending control point (omitted ifx2 is array).
+ @param [x] {number} x-coordinate of curve end (omitted if x2 is array).
+ @param [y] {number} y-coordinate of curve end (omitted if x2 is array).
+ @param [relative=false] {boolean} true for coordinates relative to the current point,
+ false for coordinates being absolute.
+ @return {SVGPath} This path. */
smoothC: function(x2, y2, x, y, relative) {
- relative = (isArray(x2) ? y2 : relative);
+ relative = ($.isArray(x2) ? y2 : relative);
return this._coords((relative ? 's' : 'S'), x2, y2, x, y);
},
- /* Draw a quadratic Bézier curve.
- @param x1 (number) x-coordinate of control point or
- (number[][]) x-/y-coordinates of control and end points to draw to
- @param y1 (number) y-coordinate of control point (omitted if x1 is array)
- @param x (number) x-coordinate of curve end (omitted if x1 is array)
- @param y (number) y-coordinate of curve end (omitted if x1 is array)
- @param relative (boolean) true for coordinates relative to the current point,
- false for coordinates being absolute
- @return (SVGPath) this path */
+ /** Draw a quadratic Bézier curve.
+ @param x1 {number|number[][]} x-coordinate of control point or
+ x-/y-coordinates of control and end points to draw to.
+ @param [y1] {number} y-coordinate of control point (omitted if x1 is array).
+ @param [x] {number} x-coordinate of curve end (omitted if x1 is array).
+ @param [y] {number} y-coordinate of curve end (omitted if x1 is array).
+ @param [relative=false] {boolean} true for coordinates relative to the current point,
+ false for coordinates being absolute.
+ @return {SVGPath} This path. */
curveQ: function(x1, y1, x, y, relative) {
- relative = (isArray(x1) ? y1 : relative);
+ relative = ($.isArray(x1) ? y1 : relative);
return this._coords((relative ? 'q' : 'Q'), x1, y1, x, y);
},
- /* Continue a quadratic Bézier curve.
- Control point is the reflection of the previous control point.
- @param x (number) x-coordinate of curve end or
- (number[][]) x-/y-coordinates of points to draw to
- @param y (number) y-coordinate of curve end (omitted if x is array)
- @param relative (boolean) true for coordinates relative to the current point,
- false for coordinates being absolute
- @return (SVGPath) this path */
+ /** Continue a quadratic Bézier curve.
+ Control point is the reflection of the previous control point.
+ @param x {number|number[][]} x-coordinate of curve end or x-/y-coordinates of points to draw to. + @param [y] {number} y-coordinate of curve end (omitted ifx is array).
+ @param [relative=false] {boolean} true for coordinates relative to the current point,
+ false for coordinates being absolute.
+ @return {SVGPath} This path. */
smoothQ: function(x, y, relative) {
- relative = (isArray(x) ? y : relative);
+ relative = ($.isArray(x) ? y : relative);
return this._coords((relative ? 't' : 'T'), x, y);
},
- /* Generate a path command with (a list of) coordinates. */
+ /** Generate a path command with (a list of) coordinates.
+ @private
+ @param cmd {string} The command for the path element.
+ @param x1 {number} The first x-coordinate.
+ @param y1 {number} The first y-coordinate.
+ @param [x2] {number} The second x-coordinate.
+ @param [y2] {number} The second y-coordinate.
+ @param [x3] {number} The third x-coordinate.
+ @param [y3] {number} The third y-coordinate.
+ @return {SVGPath} This path. */
_coords: function(cmd, x1, y1, x2, y2, x3, y3) {
- if (isArray(x1)) {
+ if ($.isArray(x1)) {
for (var i = 0; i < x1.length; i++) {
var cs = x1[i];
- this._path += (i == 0 ? cmd : ' ') + cs[0] + ',' + cs[1] +
- (cs.length < 4 ? '' : ' ' + cs[2] + ',' + cs[3] +
- (cs.length < 6 ? '': ' ' + cs[4] + ',' + cs[5]));
+ this._path += (i === 0 ? cmd : ' ') + cs[0] + ',' + cs[1] + (cs.length < 4 ? '' :
+ ' ' + cs[2] + ',' + cs[3] + (cs.length < 6 ? '': ' ' + cs[4] + ',' + cs[5]));
}
}
else {
this._path += cmd + x1 + ',' + y1 +
- (x2 == null ? '' : ' ' + x2 + ',' + y2 +
- (x3 == null ? '' : ' ' + x3 + ',' + y3));
+ (x2 == null ? '' : ' ' + x2 + ',' + y2 + (x3 == null ? '' : ' ' + x3 + ',' + y3));
}
return this;
},
- /* Draw an arc to a position.
- @param rx (number) x-radius of arc or
- (number/boolean[][]) x-/y-coordinates and flags for points to draw to
- @param ry (number) y-radius of arc (omitted if rx is array)
- @param xRotate (number) x-axis rotation (degrees, clockwise) (omitted if rx is array)
- @param large (boolean) true to draw the large part of the arc,
- false to draw the small part (omitted if rx is array)
- @param clockwise (boolean) true to draw the clockwise arc,
- false to draw the anti-clockwise arc (omitted if rx is array)
- @param x (number) x-coordinate of arc end (omitted if rx is array)
- @param y (number) y-coordinate of arc end (omitted if rx is array)
- @param relative (boolean) true for coordinates relative to the current point,
- false for coordinates being absolute
- @return (SVGPath) this path */
+ /** Draw an arc to a position.
+ @param rx {number|any[][]} x-radius of arc or x-/y-coordinates and flags for points to draw to.
+ @param [ry] {number} y-radius of arc (omitted if rx is array).
+ @param [xRotate] {number} x-axis rotation (degrees, clockwise) (omitted if rx is array).
+ @param [large] {boolean} true to draw the large part of the arc,
+ false to draw the small part (omitted if rx is array).
+ @param [clockwise] {boolean} true to draw the clockwise arc,
+ false to draw the anti-clockwise arc (omitted if rx is array).
+ @param [x] {number} x-coordinate of arc end (omitted if rx is array).
+ @param [y] {number} y-coordinate of arc end (omitted if rx is array).
+ @param [relative=false] {boolean} true for coordinates relative to the current point,
+ false for coordinates being absolute.
+ @return {SVGPath} This path. */
arc: function(rx, ry, xRotate, large, clockwise, x, y, relative) {
- relative = (isArray(rx) ? ry : relative);
+ relative = ($.isArray(rx) ? ry : relative);
this._path += (relative ? 'a' : 'A');
- if (isArray(rx)) {
+ if ($.isArray(rx)) {
for (var i = 0; i < rx.length; i++) {
var cs = rx[i];
- this._path += (i == 0 ? '' : ' ') + cs[0] + ',' + cs[1] + ' ' +
- cs[2] + ' ' + (cs[3] ? '1' : '0') + ',' +
- (cs[4] ? '1' : '0') + ' ' + cs[5] + ',' + cs[6];
+ this._path += (i === 0 ? '' : ' ') + cs[0] + ',' + cs[1] + ' ' +
+ cs[2] + ' ' + (cs[3] ? '1' : '0') + ',' + (cs[4] ? '1' : '0') + ' ' + cs[5] + ',' + cs[6];
}
}
else {
@@ -1284,15 +1247,15 @@ $.extend(SVGPath.prototype, {
return this;
},
- /* Close the current path.
- @return (SVGPath) this path */
+ /** Close the current path.
+ @return {SVGPath} This path. */
close: function() {
this._path += 'z';
return this;
},
- /* Return the string rendering of the specified path.
- @return (string) stringified path */
+ /** Return the string rendering of the specified path.
+ @return {string} The stringified path. */
path: function() {
return this._path;
}
@@ -1308,10 +1271,11 @@ SVGPath.prototype.curveQTo = SVGPath.prototype.curveQ;
SVGPath.prototype.smoothQTo = SVGPath.prototype.smoothQ;
SVGPath.prototype.arcTo = SVGPath.prototype.arc;
-/* Helper to generate an SVG text object.
- Obtain an instance from the SVGWrapper object.
- String calls together to generate the text and use its value:
- var text = root.createText();
+/** Helper to generate an SVG text object.
+ Obtain an instance from the SVGWrapper object.
+String calls together to generate the text and use its value:
+ @module SVGText + @example var text = root.createText(); root.text(null, x, y, text.string('This is '). span('red', {fill: 'red'}).string('!'), {fill: 'blue'}); */ function SVGText() { @@ -1319,62 +1283,61 @@ function SVGText() { } $.extend(SVGText.prototype, { - /* Prepare to create a new text object. - @return (SVGText) this text */ + /** Prepare to create a new text object. + @return {SVGText} This text object. */ reset: function() { this._parts = []; return this; }, - /* Add a straight string value. - @param value (string) the actual text - @return (SVGText) this text object */ + /** Add a straight string value. + @param value {string} The actual text. + @return {SVGText} This text object. */ string: function(value) { - this._parts[this._parts.length] = ['text', value]; + this._parts.push(['text', value]); return this; }, - /* Add a separate text span that has its own settings. - @param value (string) the actual text - @param settings (object) the settings for this text - @return (SVGText) this text object */ + /** Add a separate text span that has its own settings. + @param value {string} The actual text. + @param settings {object} The settings for this text. + @return {SVGText} This text object. */ span: function(value, settings) { - this._parts[this._parts.length] = ['tspan', value, settings]; + this._parts.push(['tspan', value, settings]); return this; }, - /* Add a reference to a previously defined text string. - @param id (string) the ID of the actual text - @param settings (object) the settings for this text - @return (SVGText) this text object */ + /** Add a reference to a previously defined text string. + @param id {string} The ID of the actual text. + @param settings {object} The settings for this text. + @return {SVGText} This text object. */ ref: function(id, settings) { - this._parts[this._parts.length] = ['tref', id, settings]; + this._parts.push(['tref', id, settings]); return this; }, - /* Add text drawn along a path. - @param id (string) the ID of the path - @param value (string) the actual text - @param settings (object) the settings for this text - @return (SVGText) this text object */ + /** Add text drawn along a path. + @param id {string} The ID of the path. + @param value {string} The actual text. + @param settings {object} The settings for this text. + @return {SVGText} This text object. */ path: function(id, value, settings) { - this._parts[this._parts.length] = ['textpath', value, - $.extend({href: id}, settings || {})]; + this._parts.push(['textpath', value, $.extend({href: id}, settings || {})]); return this; } }); -/* Attach the SVG functionality to a jQuery selection. - @param command (string) the command to run (optional, default 'attach') - @param options (object) the new settings to use for these SVG instances - @return jQuery (object) for chaining further calls */ +/** Attach the SVG functionality to a jQuery selection. + @param [command] {string} The command to run. + @param [options] {object} The new settings to use for these SVG instances. + @return {jQuery} For chaining further calls. */ $.fn.svg = function(options) { var otherArgs = Array.prototype.slice.call(arguments, 1); - if (typeof options == 'string' && options == 'get') { + if (typeof options === 'string' && options === 'get') { return $.svg['_' + options + 'SVG'].apply($.svg, [this[0]].concat(otherArgs)); } return this.each(function() { - if (typeof options == 'string') { + if (typeof options === 'string') { $.svg['_' + options + 'SVG'].apply($.svg, [this].concat(otherArgs)); } else { @@ -1383,11 +1346,6 @@ $.fn.svg = function(options) { }); }; -/* Determine whether an object is an array. */ -function isArray(a) { - return (a && a.constructor == Array); -} - // Singleton primary SVG interface $.svg = new SVGManager(); diff --git a/jquery.svg.min.js b/jquery.svg.min.js index b193b9e..7c99985 100644 --- a/jquery.svg.min.js +++ b/jquery.svg.min.js @@ -1,7 +1,6 @@ -/* http://keith-wood.name/svg.html - SVG for jQuery v1.4.5. +/* http://keith-wood.name/svg.html + SVG for jQuery v1.5.0. Written by Keith Wood (kbwood{at}iinet.com.au) August 2007. - Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and - MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses. + Available under the MIT (http://keith-wood.name/licence.html) license. Please attribute the author if you use it. */ -(function($){function SVGManager(){this._settings=[];this._extensions=[];this.regional=[];this.regional['']={errorLoadingText:'Error loading',notSupportedText:'This browser does not support SVG'};this.local=this.regional[''];this._uuid=new Date().getTime();this._renesis=detectActiveX('RenesisX.RenesisCtrl')}function detectActiveX(a){try{return!!(window.ActiveXObject&&new ActiveXObject(a))}catch(e){return false}}var q='svgwrapper';$.extend(SVGManager.prototype,{markerClassName:'hasSVG',svgNS:'http://www.w3.org/2000/svg',xlinkNS:'http://www.w3.org/1999/xlink',_wrapperClass:SVGWrapper,_attrNames:{class_:'class',in_:'in',alignmentBaseline:'alignment-baseline',baselineShift:'baseline-shift',clipPath:'clip-path',clipRule:'clip-rule',colorInterpolation:'color-interpolation',colorInterpolationFilters:'color-interpolation-filters',colorRendering:'color-rendering',dominantBaseline:'dominant-baseline',enableBackground:'enable-background',fillOpacity:'fill-opacity',fillRule:'fill-rule',floodColor:'flood-color',floodOpacity:'flood-opacity',fontFamily:'font-family',fontSize:'font-size',fontSizeAdjust:'font-size-adjust',fontStretch:'font-stretch',fontStyle:'font-style',fontVariant:'font-variant',fontWeight:'font-weight',glyphOrientationHorizontal:'glyph-orientation-horizontal',glyphOrientationVertical:'glyph-orientation-vertical',horizAdvX:'horiz-adv-x',horizOriginX:'horiz-origin-x',imageRendering:'image-rendering',letterSpacing:'letter-spacing',lightingColor:'lighting-color',markerEnd:'marker-end',markerMid:'marker-mid',markerStart:'marker-start',stopColor:'stop-color',stopOpacity:'stop-opacity',strikethroughPosition:'strikethrough-position',strikethroughThickness:'strikethrough-thickness',strokeDashArray:'stroke-dasharray',strokeDashOffset:'stroke-dashoffset',strokeLineCap:'stroke-linecap',strokeLineJoin:'stroke-linejoin',strokeMiterLimit:'stroke-miterlimit',strokeOpacity:'stroke-opacity',strokeWidth:'stroke-width',textAnchor:'text-anchor',textDecoration:'text-decoration',textRendering:'text-rendering',underlinePosition:'underline-position',underlineThickness:'underline-thickness',vertAdvY:'vert-adv-y',vertOriginY:'vert-origin-y',wordSpacing:'word-spacing',writingMode:'writing-mode'},_attachSVG:function(a,b){var c=(a.namespaceURI==this.svgNS?a:null);var a=(c?null:a);if($(a||c).hasClass(this.markerClassName)){return}if(typeof b=='string'){b={loadURL:b}}else if(typeof b=='function'){b={onLoad:b}}$(a||c).addClass(this.markerClassName);try{if(!c){c=document.createElementNS(this.svgNS,'svg');c.setAttribute('version','1.1');if(a.clientWidth>0){c.setAttribute('width',a.clientWidth)}if(a.clientHeight>0){c.setAttribute('height',a.clientHeight)}a.appendChild(c)}this._afterLoad(a,c,b||{})}catch(e){if($.browser.msie){if(!a.id){a.id='svg'+(this._uuid++)}this._settings[a.id]=b;a.innerHTML=''}else{a.innerHTML=''+this.local.notSupportedText+'
'}}},_registerSVG:function(){for(var i=0;iSVG is not supported natively on this browser
')}},_afterLoad:function(a,b,c){var c=c||this._settings[a.id];this._settings[a?a.id:'']=null;var d=new this._wrapperClass(b,a);$.data(a||b,$.svg.propertyName,d);try{if(c.loadURL){d.load(c.loadURL,c)}if(c.settings){d.configure(c.settings)}if(c.onLoad&&!c.loadURL){c.onLoad.apply(a||b,[d])}}catch(e){alert(e)}},_getSVG:function(a){return $(a).data(this.propertyName)},_destroySVG:function(a){a=$(a);if(!a.hasClass(this.markerClassName)){return}a.removeClass(this.markerClassName).removeData(this.propertyName);if(a[0].namespaceURI!==this.svgNS){a.empty()}},addExtension:function(a,b){this._extensions.push([a,b])},isSVGElem:function(a){return(a.nodeType===1&&a.namespaceURI===$.svg.svgNS)}});function SVGWrapper(a,b){this._svg=a;this._container=b;for(var i=0;i<$.svg._extensions.length;i++){var c=$.svg._extensions[i];this[c[0]]=new c[1](this)}}$.extend(SVGWrapper.prototype,{width:function(){return(this._container?this._container.clientWidth:this._svg.width)},height:function(){return(this._container?this._container.clientHeight:this._svg.height)},root:function(){return this._svg},configure:function(a,b,c){if(!a.nodeName){c=b;b=a;a=this._svg}if(c){for(var i=a.attributes.length-1;i>=0;i--){var d=a.attributes.item(i);if(!(d.nodeName==='onload'||d.nodeName==='version'||d.nodeName.substring(0,5)==='xmlns')){a.attributes.removeNamedItem(d.nodeName)}}}for(var e in b){a.setAttribute($.svg._attrNames[e]||e,b[e])}return this},getElementById:function(a){return this._svg.ownerDocument.getElementById(a)},change:function(a,b){if(a){for(var c in b){if(b[c]==null){a.removeAttribute($.svg._attrNames[c]||c)}else{a.setAttribute($.svg._attrNames[c]||c,b[c])}}}return this},_args:function(b,c,d){c.splice(0,0,'parent');c.splice(c.length,0,'settings');var e={};var f=0;if(b[0]!=null&&b[0].jquery){b[0]=b[0][0]}if(b[0]!=null&&!(typeof b[0]==='object'&&b[0].nodeName)){e['parent']=null;f=1}for(var i=0;i\'+7.2n.30+\'
\'}}},3r:9(){14(8 i=0;i<27.2F.R;i++){8 a=27.2F[i].3s;w(!$(a).2y($.D.1C)||$.2G(a,q)){5U}8 b=P;1s{b=27.2F[i].5V()}1t(e){5W($.D.3r,5X);u}b=(b?b.1P:P);w(b){$.D.2D(a,b)}}},2D:9(a,b,c){8 c=c||7.1X[a.E];7.1X[a?a.E:\'\']=P;8 d=1e 7.35(b,a);$.2G(a||b,q,d);1s{w(c.26){d.3t(c.26,c)}w(c.F){d.1Q(c.F)}w(c.1m&&!c.26){c.1m.1R(a||b,[d])}}1t(e){5Y(e)}},5Z:9(a){a=(13 a==\'1f\'?$(a)[0]:(a.1E?a[0]:a));u $.2G(a,q)},60:9(a){8 b=$(a);w(!b.2y(7.1C)){u}b.61(7.1C);w(a.25!=7.1u){b.62()}$.63(a,q)},64:9(a,b){7.1Y.3u([a,b])},65:9(a){u(a.1F==1&&a.25==$.D.1u)}});9 2t(a,b){7.N=a;7.1z=b;14(8 i=0;i<$.D.1Y.R;i++){8 c=$.D.1Y[i];7[c[0]]=1e c[1](7)}}$.I(2t.W,{66:9(){u(7.1z?7.1z.2B:7.N.O)},67:9(){u(7.1z?7.1z.2C:7.N.U)},68:9(){u 7.N},1Q:9(a,b,c){w(!a.12){c=b;b=a;a=7.N}w(c){14(8 i=a.1g.R-1;i>=0;i--){8 d=a.1g.29(i);w(!(d.12==\'69\'||d.12==\'2A\'||d.12.1G(0,5)==\'2H\')){a.1g.6a(d.12)}}}14(8 e 1Z b){a.1x($.D.1M[e]||e,b[e])}u 7},3v:9(a){u 7.N.17.3v(a)},6b:9(a,b){w(a){14(8 c 1Z b){w(b[c]==P){a.6c($.D.1M[c]||c)}Y{a.1x($.D.1M[c]||c,b[c])}}}u 7},J:9(b,c,d){c.3w(0,0,\'B\');c.3w(c.R,0,\'F\');8 e={};8 f=0;w(b[0]!=P&&b[0].1E){b[0]=b[0][0]}w(b[0]!=P&&!(13 b[0]==\'1S\'&&b[0].12)){e[\'B\']=P;f=1}14(8 i=0;ifalse if not. */
$.fn.hasClass = function(origHasClass) {
return function(className) {
className = className || '';
var found = false;
this.each(function() {
if ($.svg.isSVGElem(this)) {
- var classes = (this.className ? this.className.baseVal :
- this.getAttribute('class')).split(/\s+/);
- found = ($.inArray(className, classes) > -1);
+ found = ($.inArray(className, getClassNames(this).split(/\s+/)) > -1);
}
else {
found = (origHasClass.apply($(this), [className]));
@@ -89,15 +140,19 @@ $.fn.hasClass = function(origHasClass) {
};
}($.fn.hasClass);
-/* Support attributes on SVG nodes. */
+/** Support attributes on SVG nodes.
+ @param name {string} The attribute name.
+ @param [value] {any} The new attribute value.
+ @param type {boolean} Internal flag.
+ @return {any} If an attribute value is requested. */
$.fn.attr = function(origAttr) {
return function(name, value, type) {
- if (typeof name === 'string' && value === undefined) {
- var val = origAttr.apply(this, [name]);
+ if (typeof name === 'string' && value === undefined) { // Return attribute value
+ var val = origAttr.apply(this, arguments);
if (val && val.baseVal && val.baseVal.numberOfItems != null) { // Multiple values
value = '';
val = val.baseVal;
- if (name == 'transform') {
+ if (name === 'transform') {
for (var i = 0; i < val.numberOfItems; i++) {
var item = val.getItem(i);
switch (item.type) {
@@ -126,30 +181,39 @@ $.fn.attr = function(origAttr) {
options = {};
options[name] = value;
}
- return this.each(function() {
+ if ($.isFunction(value)) {
+ return $(this).each(function(i) {
+ $(this).attr(name, value.call(this, i, $(this).attr(name)));
+ });
+ }
+ var origArgs = arguments;
+ return $(this).each(function() {
if ($.svg.isSVGElem(this)) {
for (var n in options) {
- var val = ($.isFunction(options[n]) ? options[n]() : options[n]);
- (type ? this.style[n] = val : this.setAttribute(n, val));
+ (type ? this.style[n] = options[n] : this.setAttribute(n, options[n]));
}
}
else {
- origAttr.apply($(this), [name, value, type]);
+ origAttr.apply($(this), origArgs);
}
});
};
}($.fn.attr);
-/* Support removing attributes on SVG nodes. */
+/** Support removing attributes on SVG nodes.
+ @param names {string} The names of the attributes to remove. */
$.fn.removeAttr = function(origRemoveAttr) {
- return function(name) {
+ return function(names) {
+ var origArgs = arguments;
return this.each(function() {
if ($.svg.isSVGElem(this)) {
- (this[name] && this[name].baseVal ? this[name].baseVal.value = '' :
- this.setAttribute(name, ''));
+ var node = this;
+ $.each(names.split(/\s+/), function(i, name) {
+ (node[name] && node[name].baseVal ? node[name].baseVal.value = null : node.removeAttribute(name));
+ });
}
else {
- origRemoveAttr.apply($(this), [name]);
+ origRemoveAttr.apply($(this), origArgs);
}
});
};
@@ -165,242 +229,11 @@ $.extend($.cssNumber, {
/* Support retrieving CSS/attribute values on SVG nodes. */
if ($.cssProps) {
$.css = function(origCSS) {
- return function(elem, name, extra) {
+ return function(elem, name, numeric, extra) {
var value = (name.match(/^svg.*/) ? $(elem).attr($.cssProps[name] || name) : '');
- return value || origCSS(elem, name, extra);
+ return value || origCSS(elem, name, numeric, extra);
};
}($.css);
}
-
-/* Determine if any nodes are SVG nodes. */
-function anySVG(checkSet) {
- for (var i = 0; i < checkSet.length; i++) {
- if (checkSet[i].nodeType == 1 && checkSet[i].namespaceURI == $.svg.svgNS) {
- return true;
- }
- }
- return false;
-}
-
-/* Update Sizzle selectors. */
-
-$.expr.relative['+'] = function(origRelativeNext) {
- return function(checkSet, part, isXML) {
- origRelativeNext(checkSet, part, isXML || anySVG(checkSet));
- };
-}($.expr.relative['+']);
-
-$.expr.relative['>'] = function(origRelativeChild) {
- return function(checkSet, part, isXML) {
- origRelativeChild(checkSet, part, isXML || anySVG(checkSet));
- };
-}($.expr.relative['>']);
-
-$.expr.relative[''] = function(origRelativeDescendant) {
- return function(checkSet, part, isXML) {
- origRelativeDescendant(checkSet, part, isXML || anySVG(checkSet));
- };
-}($.expr.relative['']);
-
-$.expr.relative['~'] = function(origRelativeSiblings) {
- return function(checkSet, part, isXML) {
- origRelativeSiblings(checkSet, part, isXML || anySVG(checkSet));
- };
-}($.expr.relative['~']);
-
-$.expr.find.ID = function(origFindId) {
- return function(match, context, isXML) {
- return ($.svg.isSVGElem(context) ?
- [context.ownerDocument.getElementById(match[1])] :
- origFindId(match, context, isXML));
- };
-}($.expr.find.ID);
-
-var div = document.createElement('div');
-div.appendChild(document.createComment(''));
-if (div.getElementsByTagName('*').length > 0) { // Make sure no comments are found
- $.expr.find.TAG = function(match, context) {
- var results = context.getElementsByTagName(match[1]);
- if (match[1] === '*') { // Filter out possible comments
- var tmp = [];
- for (var i = 0; results[i] || results.item(i); i++) {
- if ((results[i] || results.item(i)).nodeType === 1) {
- tmp.push(results[i] || results.item(i));
- }
- }
- results = tmp;
- }
- return results;
- };
-}
-
-$.expr.preFilter.CLASS = function(match, curLoop, inplace, result, not, isXML) {
- match = ' ' + match[1].replace(/\\/g, '') + ' ';
- if (isXML) {
- return match;
- }
- for (var i = 0, elem = {}; elem != null; i++) {
- elem = curLoop[i];
- if (!elem) {
- try {
- elem = curLoop.item(i);
- }
- catch (e) {
- // Ignore
- }
- }
- if (elem) {
- var className = (!$.svg.isSVGElem(elem) ? elem.className :
- (elem.className ? elem.className.baseVal : '') || elem.getAttribute('class'));
- if (not ^ (className && (' ' + className + ' ').indexOf(match) > -1)) {
- if (!inplace)
- result.push(elem);
- }
- else if (inplace) {
- curLoop[i] = false;
- }
- }
- }
- return false;
-};
-
-$.expr.filter.CLASS = function(elem, match) {
- var className = (!$.svg.isSVGElem(elem) ? elem.className :
- (elem.className ? elem.className.baseVal : elem.getAttribute('class')));
- return (' ' + className + ' ').indexOf(match) > -1;
-};
-
-$.expr.filter.ATTR = function(origFilterAttr) {
- return function(elem, match) {
- var handler = null;
- if ($.svg.isSVGElem(elem)) {
- handler = match[1];
- $.expr.attrHandle[handler] = function(elem){
- var attr = elem.getAttribute(handler);
- return attr && attr.baseVal || attr;
- };
- }
- var filter = origFilterAttr(elem, match);
- if (handler) {
- $.expr.attrHandle[handler] = null;
- }
- return filter;
- };
-}($.expr.filter.ATTR);
-
-/*
- In the removeData function (line 1881, v1.7.2):
-
- if ( jQuery.support.deleteExpando ) {
- delete elem[ internalKey ];
- } else {
- try { // SVG
- elem.removeAttribute( internalKey );
- } catch (e) {
- elem[ internalKey ] = null;
- }
- }
-
- In the event.add function (line 2985, v1.7.2):
-
- if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
- // Bind the global event handler to the element
- try { // SVG
- elem.addEventListener( type, eventHandle, false );
- } catch(e) {
- if ( elem.attachEvent ) {
- elem.attachEvent( "on" + type, eventHandle );
- }
- }
- }
-
- In the event.remove function (line 3074, v1.7.2):
-
- if ( !special.teardown || special.teardown.call( elem, namespaces ) === false ) {
- try { // SVG
- elem.removeEventListener(type, elemData.handle, false);
- }
- catch (e) {
- if (elem.detachEvent) {
- elem.detachEvent("on" + type, elemData.handle);
- }
- }
- }
-
- In the event.fix function (line 3394, v1.7.2):
-
- if (event.target.namespaceURI == 'http://www.w3.org/2000/svg') { // SVG
- event.button = [1, 4, 2][event.button];
- }
-
- // Add which for click: 1 === left; 2 === middle; 3 === right
- // Note: button is not normalized, so don't use it
- if ( !event.which && button !== undefined ) {
- event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) );
- }
-
- In the Sizzle function (line 4083, v1.7.2):
-
- if ( toString.call(checkSet) === "[object Array]" ) {
- if ( !prune ) {
- results.push.apply( results, checkSet );
-
- } else if ( context && context.nodeType === 1 ) {
- for ( i = 0; checkSet[i] != null; i++ ) {
- if ( checkSet[i] && (checkSet[i] === true || checkSet[i].nodeType === 1 && Sizzle.contains(context, checkSet[i])) ) {
- results.push( set[i] || set.item(i) ); // SVG
- }
- }
-
- } else {
- for ( i = 0; checkSet[i] != null; i++ ) {
- if ( checkSet[i] && checkSet[i].nodeType === 1 ) {
- results.push( set[i] || set.item(i) ); // SVG
- }
- }
- }
- } else {...
-
- In the fallback for the Sizzle makeArray function (line 4877, v1.7.2):
-
- if ( toString.call(array) === "[object Array]" ) {
- Array.prototype.push.apply( ret, array );
-
- } else {
- if ( typeof array.length === "number" ) {
- for ( var l = array.length; i < l; i++ ) {
- ret.push( array[i] || array.item(i) ); // SVG
- }
-
- } else {
- for ( ; array[i]; i++ ) {
- ret.push( array[i] );
- }
- }
- }
-
- In the jQuery.cleandata function (line 6538, v1.7.2):
-
- if ( deleteExpando ) {
- delete elem[ jQuery.expando ];
-
- } else {
- try { // SVG
- elem.removeAttribute( jQuery.expando );
- } catch (e) {
- // Ignore
- }
- }
-
- In the fallback getComputedStyle function (line 6727, v1.7.2):
-
- defaultView = (elem.ownerDocument ? elem.ownerDocument.defaultView : elem.defaultView); // SVG
- if ( defaultView &&
- (computedStyle = defaultView.getComputedStyle( elem, null )) ) {
-
- ret = computedStyle.getPropertyValue( name );
- ...
-
-*/
})(jQuery);
diff --git a/jquery.svgdom.min.js b/jquery.svgdom.min.js
index 5c76168..3def35f 100644
--- a/jquery.svgdom.min.js
+++ b/jquery.svgdom.min.js
@@ -1,7 +1,6 @@
-/* http://keith-wood.name/svg.html
- jQuery DOM compatibility for jQuery SVG v1.4.5.
+/* http://keith-wood.name/svg.html
+ jQuery DOM compatibility for jQuery SVG v1.5.0.
Written by Keith Wood (kbwood{at}iinet.com.au) April 2009.
- Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and
- MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses.
+ Available under the MIT (http://keith-wood.name/licence.html) license.
Please attribute the author if you use it. */
-(function($){$.fn.addClass=function(e){return function(d){d=d||'';return this.each(function(){if($.svg.isSVGElem(this)){var c=this;$.each(d.split(/\s+/),function(i,a){var b=(c.className?c.className.baseVal:c.getAttribute('class'));if($.inArray(a,b.split(/\s+/))==-1){b+=(b?' ':'')+a;(c.className?c.className.baseVal=b:c.setAttribute('class',b))}})}else{e.apply($(this),[d])}})}}($.fn.addClass);$.fn.removeClass=function(e){return function(d){d=d||'';return this.each(function(){if($.svg.isSVGElem(this)){var c=this;$.each(d.split(/\s+/),function(i,a){var b=(c.className?c.className.baseVal:c.getAttribute('class'));b=$.grep(b.split(/\s+/),function(n,i){return n!=a}).join(' ');(c.className?c.className.baseVal=b:c.setAttribute('class',b))})}else{e.apply($(this),[d])}})}}($.fn.removeClass);$.fn.toggleClass=function(c){return function(a,b){return this.each(function(){if($.svg.isSVGElem(this)){if(typeof b!=='boolean'){b=!$(this).hasClass(a)}$(this)[(b?'add':'remove')+'Class'](a)}else{c.apply($(this),[a,b])}})}}($.fn.toggleClass);$.fn.hasClass=function(d){return function(b){b=b||'';var c=false;this.each(function(){if($.svg.isSVGElem(this)){var a=(this.className?this.className.baseVal:this.getAttribute('class')).split(/\s+/);c=($.inArray(b,a)>-1)}else{c=(d.apply($(this),[b]))}return!c});return c}}($.fn.hasClass);$.fn.attr=function(h){return function(b,c,d){if(typeof b==='string'&&c===undefined){var e=h.apply(this,[b]);if(e&&e.baseVal&&e.baseVal.numberOfItems!=null){c='';e=e.baseVal;if(b=='transform'){for(var i=0;iUse the singleton instance of this class, $.svg.filters, + to interact with the SVG filters functionality.
+ @module SVGFilter */ function SVGFilter(wrapper) { this._wrapper = wrapper; // The attached SVG wrapper object } $.extend(SVGFilter.prototype, { - /* Add a distant light filter. - @param parent (element or jQuery) the parent node for the new filter (optional) - @param result (string) the ID of this filter - @param azimuth (number) the angle (degrees) in the XY plane for the light source - @param elevation (number) the angle (degrees) in the YZ plane for the light source - @param settings (object) additional settings for the filter (optional) - @return (element) the new filter node */ + /** Add a distant light filter. + @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified. + @param result {string} The ID of this filter. + @param azimuth {number} The angle (degrees) in the XY plane for the light source. + @param elevation {number} The angle (degrees) in the YZ plane for the light source. + @param [settings] {object} Additional settings for this node. + @return {SVGElement} The new filter node. */ distantLight: function(parent, result, azimuth, elevation, settings) { var args = this._wrapper._args(arguments, ['result', 'azimuth', 'elevation']); return this._wrapper._makeNode(args.parent, 'feDistantLight', $.extend( - {result: args.result, azimuth: args.azimuth, elevation: args.elevation}, - args.settings || {})); + {result: args.result, azimuth: args.azimuth, elevation: args.elevation}, args.settings || {})); }, - /* Add a point light filter. - @param parent (element or jQuery) the parent node for the new filter (optional) - @param result (string) the ID of this filter - @param x (number) the x-coordinate for the light source - @param y (number) the y-coordinate for the light source - @param z (number) the z-coordinate for the light source - @param settings (object) additional settings for the filter (optional) - @return (element) the new filter node */ + /** Add a point light filter. + @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified. + @param result {string} The ID of this filter. + @param x {number} The x-coordinate for the light source. + @param y {number} The y-coordinate for the light source. + @param z {number} The z-coordinate for the light source. + @param [settings] {object} Additional settings for this node. + @return {SVGElement} The new filter node. */ pointLight: function(parent, result, x, y, z, settings) { var args = this._wrapper._args(arguments, ['result', 'x', 'y', 'z']); return this._wrapper._makeNode(args.parent, 'fePointLight', $.extend( {result: args.result, x: args.x, y: args.y, z: args.z}, args.settings || {})); }, - /* Add a spot light filter. - Specify all of toX, toY, toZ or none of them. - @param parent (element or jQuery) the parent node for the new filter (optional) - @param result (string) the ID of this filter - @param x (number) the x-coordinate for the light source - @param y (number) the y-coordinate for the light source - @param z (number) the z-coordinate for the light source - @param toX (number) the x-coordinate for where the light is pointing (optional) - @param toY (number) the y-coordinate for where the light is pointing (optional) - @param toZ (number) the z-coordinate for where the light is pointing (optional) - @param settings (object) additional settings for the filter (optional) - @return (element) the new filter node */ + /** Add a spot light filter. +Specify all of toX, toY, toZ or none of them.
Specify all of k1, k2, k3, k4 or none of them.
Specify all of x, y, width, height or none of them.
Numeric params are only optional if following numeric params are also omitted.
+ @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified. + @param result {string}The ID of this filter. + @param in1 {string} The source filter. + @param [surfaceScale] {number} The surface height when Ain = 1. + @param [specularConstant] {number} The ks in Phong lighting model. + @param [specularExponent] {number} The shininess 1.0-128.0. + @param [settings] {object} Additional settings for this node. + @return {SVGElement} The new filter node. */ + specularLighting: function(parent, result, in1, surfaceScale, specularConstant, specularExponent, settings) { + var args = this._wrapper._args(arguments, ['result', 'in1', 'surfaceScale', 'specularConstant', 'specularExponent'], ['surfaceScale', 'specularConstant', 'specularExponent']); return this._wrapper._makeNode(args.parent, 'feSpecularLighting', $.extend( {result: args.result, in_: args.in1, surfaceScale: args.surfaceScale, - specularConstant: args.specularConstant, specularExponent: args.specularExponent}, - args.settings || {})); + specularConstant: args.specularConstant, specularExponent: args.specularExponent}, args.settings || {})); }, - /* Add a tile filter. - @param parent (element or jQuery) the parent node for the new filter (optional) - @param result (string) the ID of this filter - @param in1 (string) the source filter - @param x (number) the left coordinate of the rectangle - @param y (number) the top coordinate of the rectangle - @param width (number) the width of the rectangle - @param height (number) the height of the rectangle - @param settings (object) additional settings for the filter (optional) - @return (element) the new filter node */ + /** Add a tile filter. + @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified. + @param result {string} The ID of this filter. + @param in1 {string} The source filter. + @param x {number} The left coordinate of the rectangle. + @param y {number} The top coordinate of the rectangle. + @param width {number} The width of the rectangle. + @param height {number} The height of the rectangle. + @param [settings] {object} Additional settings for this node. + @return {SVGElement} The new filter node. */ tile: function(parent, result, in1, x, y, width, height, settings) { - var args = this._wrapper._args(arguments, - ['result', 'in1', 'x', 'y', 'width', 'height']); + var args = this._wrapper._args(arguments, ['result', 'in1', 'x', 'y', 'width', 'height']); return this._wrapper._makeNode(args.parent, 'feTile', $.extend( {result: args.result, in_: args.in1, x: args.x, y: args.y, width: args.width, height: args.height}, args.settings || {})); }, - /* Add a turbulence filter. - @param parent (element or jQuery) the parent node for the new filter (optional) - @param result (string) the ID of this filter - @param type (string) fractalNoise | turbulence - @param baseFreq (number or 'number number') the base frequency, - optionally separated into x- and y-components - @param octaves (number) the amount of turbulence (optional) - @param settings (object) additional settings for the filter (optional) - @return (element) the new filter node */ + /** Add a turbulence filter. + @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified. + @param result {string} The ID of this filter. + @param type {string} One of 'fractalNoise', 'turbulence'. + @param [baseFreq] {number|string} The base frequency, + optionally separated into x- and y-components ('number number'). + @param [octaves] {number} The amount of turbulence. + @param [settings] {object} Additional settings for this node. + @return {SVGElement} The new filter node. */ turbulence: function(parent, result, type, baseFreq, octaves, settings) { - var args = this._wrapper._args(arguments, ['result', 'type', - 'baseFreq', 'octaves'], ['octaves']); + var args = this._wrapper._args(arguments, ['result', 'type', 'baseFreq', 'octaves'], ['octaves']); return this._wrapper._makeNode(args.parent, 'feTurbulence', $.extend( {result: args.result, type: args.type, baseFrequency: args.baseFreq, numOctaves: args.octaves}, args.settings || {})); } }); -/* Determine whether an object is an array. */ -function isArray(a) { - return (a && a.constructor == Array); -} - })(jQuery) diff --git a/jquery.svgfilter.min.js b/jquery.svgfilter.min.js index 65cfae2..d29a0b8 100644 --- a/jquery.svgfilter.min.js +++ b/jquery.svgfilter.min.js @@ -1,7 +1,6 @@ -/* http://keith-wood.name/svg.html - SVG filters for jQuery v1.4.5. +/* http://keith-wood.name/svg.html + SVG filters for jQuery v1.5.0. Written by Keith Wood (kbwood{at}iinet.com.au) August 2007. - Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and - MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses. + Available under the MIT (http://keith-wood.name/licence.html) license. Please attribute the author if you use it. */ -(function($){$.svg.addExtension('filters',SVGFilter);$.extend($.svg._wrapperClass.prototype,{filter:function(a,b,x,y,c,d,e){var f=this._args(arguments,['id','x','y','width','height']);return this._makeNode(f.parent,'filter',$.extend({id:f.id,x:f.x,y:f.y,width:f.width,height:f.height},f.settings||{}))}});function SVGFilter(a){this._wrapper=a}$.extend(SVGFilter.prototype,{distantLight:function(a,b,c,d,e){var f=this._wrapper._args(arguments,['result','azimuth','elevation']);return this._wrapper._makeNode(f.parent,'feDistantLight',$.extend({result:f.result,azimuth:f.azimuth,elevation:f.elevation},f.settings||{}))},pointLight:function(a,b,x,y,z,c){var d=this._wrapper._args(arguments,['result','x','y','z']);return this._wrapper._makeNode(d.parent,'fePointLight',$.extend({result:d.result,x:d.x,y:d.y,z:d.z},d.settings||{}))},spotLight:function(a,b,x,y,z,c,d,e,f){var g=this._wrapper._args(arguments,['result','x','y','z','toX','toY','toZ'],['toX']);var h=$.extend({result:g.result,x:g.x,y:g.y,z:g.z},(g.toX!=null?{pointsAtX:g.toX,pointsAtY:g.toY,pointsAtZ:g.toZ}:{}));return this._wrapper._makeNode(g.parent,'feSpotLight',$.extend(h,g.settings||{}))},blend:function(a,b,c,d,e,f){var g=this._wrapper._args(arguments,['result','mode','in1','in2']);return this._wrapper._makeNode(g.parent,'feBlend',$.extend({result:g.result,mode:g.mode,in_:g.in1,in2:g.in2},g.settings||{}))},colorMatrix:function(a,b,c,d,e,f){var g=this._wrapper._args(arguments,['result','in1','type','values']);if(isArray(g.values)){var h='';for(var i=0;iThe rendering object must implement the following functions: getTitle(),
+ getDescription(), getOptions(), drawChart(graph).
Use the singleton instance of this class, $.svg.graph, + to interact with the SVG graph functionality.
+ @module SVGGraph */ function SVGGraph(wrapper) { this._wrapper = wrapper; // The attached SVG wrapper object this._drawNow = false; // True for immediate update, false to wait for redraw call @@ -49,8 +53,7 @@ function SVGGraph(wrapper) { this._chartOptions = {}; // Extra options for the graph type // The graph title and settings this._title = {value: '', offset: 25, settings: {textAnchor: 'middle'}}; - this._area = [0.1, 0.1, 0.8, 0.9]; // The chart area: left, top, right, bottom, - // > 1 in pixels, <= 1 as proportion + this._area = [0.1, 0.1, 0.8, 0.9]; // The chart area: left, top, right, bottom, > 1 in pixels, <= 1 as proportion this._chartFormat = {fill: 'none', stroke: 'black'}; // The formatting for the chart area this._gridlines = []; // The formatting of the x- and y-gridlines this._series = []; // The series to be plotted, each is an object @@ -70,49 +73,54 @@ function SVGGraph(wrapper) { $.extend(SVGGraph.prototype, { /* Useful indexes. */ + /** Index in a dimensions array for x-coordinate. */ X: 0, + /** Index in a dimensions array for y-coordinate. */ Y: 1, + /** Index in a dimensions array for width. */ W: 2, + /** Index in a dimensions array for height. */ H: 3, + /** Index in an area array for left x-coordinate. */ L: 0, + /** Index in an area array for top y-coordinate. */ T: 1, + /** Index in an area array for right x-coordinate. */ R: 2, + /** Index in an area array for bottom y-coordinate. */ B: 3, /* Standard percentage axis. */ _percentageAxis: new SVGGraphAxis(this, $.svg.graphing.region.percentageText, 0, 100, 10, 0), - /* Set or retrieve the container for the graph. - @param cont (SVG element) the container for the graph - @return (SVGGraph) this graph object or - (SVG element) the current container (if no parameters) */ + /** Set or retrieve the container for the graph. + @param cont {SVGElement} The container for the graph. + @return {SVGGraph|SVGElement} This graph object or the current container (if no parameters). */ container: function(cont) { - if (arguments.length == 0) { + if (arguments.length === 0) { return this._chartCont; } this._chartCont = cont; return this; }, - /* Set or retrieve the type of chart to be rendered. - See $.svg.graphing.getChartTypes() for the list of available types. - @param id (string) the ID of the chart type - @param options (object) additional settings for this chart type (optional) - @return (SVGGraph) this graph object or - (string) the chart type (if no parameters) - @deprecated use type() */ + /** Set or retrieve the type of chart to be rendered. +See $.svg.graphing.getChartTypes() for the list of available types.
type(). */
chartType: function(id, options) {
- return (arguments.length == 0 ? this.type() : this.type(id, options));
+ return (arguments.length === 0 ? this.type() : this.type(id, options));
},
- /* Set or retrieve the type of chart to be rendered.
- See $.svg.graphing.getChartTypes() for the list of available types.
- @param id (string) the ID of the chart type
- @param options (object) additional settings for this chart type (optional)
- @return (SVGGraph) this graph object or
- (string) the chart type (if no parameters) */
+ /** Set or retrieve the type of chart to be rendered.
+ See $.svg.graphing.getChartTypes() for the list of available types.
options(). */
chartOptions: function(options) {
- return(arguments.length == 0 ? this.options() : this.options(options));
+ return(arguments.length === 0 ? this.options() : this.options(options));
},
- /* Set or retrieve additional options for the particular chart type.
- @param options (object) the extra options
- @return (SVGGraph) this graph object or
- (object) the chart options (if no parameters) */
+ /** Set or retrieve additional options for the particular chart type.
+ @param options {object} The extra options.
+ @return {SVGGraph|object} This graph object or the chart options (if no parameters). */
options: function(options) {
- if (arguments.length == 0) {
+ if (arguments.length === 0) {
return this._chartOptions;
}
this._chartOptions = $.extend({}, options);
@@ -146,82 +152,72 @@ $.extend(SVGGraph.prototype, {
return this;
},
- /* Set or retrieve the background of the graph chart.
- @param fill (string) how to fill the chart background
- @param stroke (string) the colour of the outline (optional)
- @param settings (object) additional formatting for the chart background (optional)
- @return (SVGGraph) this graph object or
- (object) the chart format (if no parameters)
- @deprecated use format() */
+ /** Set or retrieve the background of the graph chart.
+ @param fill {string} How to fill the chart background.
+ @param [stroke] {string} The colour of the outline.
+ @param [settings] {object} Additional formatting for the chart background.
+ @return {SVGGraph|object} This graph object or the chart format (if no parameters).
+ @deprecated Use format(). */
chartFormat: function(fill, stroke, settings) {
- return (arguments.length == 0 ? this.format() : this.format(fill, stroke, settings));
+ return (arguments.length === 0 ? this.format() : this.format(fill, stroke, settings));
},
- /* Set or retrieve the background of the graph chart.
- @param fill (string) how to fill the chart background
- @param stroke (string) the colour of the outline (optional)
- @param settings (object) additional formatting for the chart background (optional)
- @return (SVGGraph) this graph object or
- (object) the chart format (if no parameters) */
+ /** Set or retrieve the background of the graph chart.
+ @param fill {string} How to fill the chart background.
+ @param [stroke] {string} The colour of the outline.
+ @param [settings] {object} Additional formatting for the chart background.
+ @return {SVGGraph|object} This graph object or the chart format (if no parameters). */
format: function(fill, stroke, settings) {
- if (arguments.length == 0) {
+ if (arguments.length === 0) {
return this._chartFormat;
}
- if (typeof stroke == 'object') {
+ if (typeof stroke === 'object') {
settings = stroke;
stroke = null;
}
- this._chartFormat = $.extend({fill: fill},
- (stroke ? {stroke: stroke} : {}), settings || {});
+ this._chartFormat = $.extend({fill: fill}, (stroke ? {stroke: stroke} : {}), settings || {});
this._drawGraph();
return this;
},
- /* Set or retrieve the main chart area.
- @param left (number) > 1 is pixels, <= 1 is proportion of width or
- (number[4]) for left, top, right, bottom
- @param top (number) > 1 is pixels, <= 1 is proportion of height
- @param right (number) > 1 is pixels, <= 1 is proportion of width
- @param bottom (number) > 1 is pixels, <= 1 is proportion of height
- @return (SVGGraph) this graph object or
- (number[4]) the chart area: left, top, right, bottom (if no parameters)
- @deprecated use area() */
+ /** Set or retrieve the main chart area.
+ @param left {number|number[]} > 1 is pixels, <= 1 is proportion of width or array for left, top, right, bottom.
+ @param [top] {number} > 1 is pixels, <= 1 is proportion of height.
+ @param [right] {number} > 1 is pixels, <= 1 is proportion of width.
+ @param [bottom] {number} > 1 is pixels, <= 1 is proportion of height.
+ @return {SVGGraph|number[]} This graph object or the chart area: left, top, right, bottom (if no parameters).
+ @deprecated Use area(). */
chartArea: function(left, top, right, bottom) {
- return (arguments.length == 0 ? this.area() : this.area(left, top, right, bottom));
+ return (arguments.length === 0 ? this.area() : this.area(left, top, right, bottom));
},
- /* Set or retrieve the main chart area.
- @param left (number) > 1 is pixels, <= 1 is proportion of width or
- (number[4]) for left, top, right, bottom
- @param top (number) > 1 is pixels, <= 1 is proportion of height
- @param right (number) > 1 is pixels, <= 1 is proportion of width
- @param bottom (number) > 1 is pixels, <= 1 is proportion of height
- @return (SVGGraph) this graph object or
- (number[4]) the chart area: left, top, right, bottom (if no parameters) */
+ /** Set or retrieve the main chart area.
+ @param left {number|number[]} > 1 is pixels, <= 1 is proportion of width or array for left, top, right, bottom.
+ @param [top] {number} > 1 is pixels, <= 1 is proportion of height.
+ @param [right] {number} > 1 is pixels, <= 1 is proportion of width.
+ @param [bottom] {number} > 1 is pixels, <= 1 is proportion of height.
+ @return {SVGGraph|number[]} This graph object or the chart area: left, top, right, bottom (if no parameters). */
area: function(left, top, right, bottom) {
- if (arguments.length == 0) {
+ if (arguments.length === 0) {
return this._area;
}
- this._area = (isArray(left) ? left : [left, top, right, bottom]);
+ this._area = ($.isArray(left) ? left : [left, top, right, bottom]);
this._drawGraph();
return this;
},
- /* Set or retrieve the gridlines formatting for the graph chart.
- @param xSettings (string) the colour of the gridlines along the x-axis, or
- (object) formatting for the gridlines along the x-axis, or
- null for none
- @param ySettings (string) the colour of the gridlines along the y-axis, or
- (object) formatting for the gridlines along the y-axis, or
- null for none
- @return (SVGGraph) this graph object or
- (object[2]) the gridlines formatting (if no parameters) */
+ /** Set or retrieve the gridlines formatting for the graph chart.
+ @param xSettings {string|object} The colour of the gridlines along the x-axis,
+ or formatting for the gridlines along the x-axis, or null for none.
+ @param ySettings {string|object} The colour of the gridlines along the y-axis,
+ or formatting for the gridlines along the y-axis, or null for none.
+ @return {SVGGraph|object[]} This graph object or the gridlines formatting (if no parameters) */
gridlines: function(xSettings, ySettings) {
- if (arguments.length == 0) {
+ if (arguments.length === 0) {
return this._gridlines;
}
- this._gridlines = [(typeof xSettings == 'string' ? {stroke: xSettings} : xSettings),
- (typeof ySettings == 'string' ? {stroke: ySettings} : ySettings)];
+ this._gridlines = [(typeof xSettings === 'string' ? {stroke: xSettings} : xSettings),
+ (typeof ySettings === 'string' ? {stroke: ySettings} : ySettings)];
if (this._gridlines[0] == null && this._gridlines[1] == null) {
this._gridlines = [];
}
@@ -229,81 +225,77 @@ $.extend(SVGGraph.prototype, {
return this;
},
- /* Set or retrieve the title of the graph and its formatting.
- @param value (string) the title
- @param offset (number) the vertical positioning of the title
- > 1 is pixels, <= 1 is proportion of width (optional)
- @param colour (string) the colour of the title (optional)
- @param settings (object) formatting for the title (optional)
- @return (SVGGraph) this graph object or
- (object) value, offset, and settings for the title (if no parameters) */
+ /** Set or retrieve the title of the graph and its formatting.
+ @param value {string} The title.
+ @param [offset] {number} The vertical positioning of the title > 1 is pixels, <= 1 is proportion of width.
+ @param [colour] {string} The colour of the title.
+ @param [settings] {object} Formatting for the title.
+ @return {SVGGraph|object} This graph object or value, offset, and settings for the title (if no parameters). */
title: function(value, offset, colour, settings) {
- if (arguments.length == 0) {
+ if (arguments.length === 0) {
return this._title;
}
- if (typeof offset != 'number') {
+ if (typeof offset !== 'number') {
settings = colour;
colour = offset;
offset = null;
}
- if (typeof colour != 'string') {
+ if (typeof colour !== 'string') {
settings = colour;
colour = null;
}
this._title = {value: value, offset: offset || this._title.offset,
- settings: $.extend({textAnchor: 'middle'},
- (colour ? {fill: colour} : {}), settings || {})};
+ settings: $.extend({textAnchor: 'middle'}, (colour ? {fill: colour} : {}), settings || {})};
this._drawGraph();
return this;
},
- /* Add a series of values to be plotted on the graph.
- @param name (string) the name of this series (optional)
- @param values (number[]) the values to be plotted
- @param fill (string) how the plotted values are filled
- @param stroke (string) the colour of the plotted lines (optional)
- @param strokeWidth (number) the width of the plotted lines (optional)
- @param settings (object) additional settings for the plotted values (optional)
- @return (SVGGraph) this graph object */
+ /** Add a series of values to be plotted on the graph.
+ @param [name] {string} The name of this series.
+ @param values {number[]} The values to be plotted.
+ @param fill {string} How the plotted values are filled.
+ @param [stroke] {string} The colour of the plotted lines.
+ @param [strokeWidth] {number} The width of the plotted lines.
+ @param [settings] {object} Additional settings for the plotted values.
+ @return {SVGGraph} This graph object. */
addSeries: function(name, values, fill, stroke, strokeWidth, settings) {
- this._series.push(new SVGGraphSeries(
- this, name, values, fill, stroke, strokeWidth, settings));
+ this._series.push(new SVGGraphSeries(this, name, values, fill, stroke, strokeWidth, settings));
this._drawGraph();
return this;
},
- /* Retrieve the series wrappers.
- @param i (number) the series index (optional)
- @return (SVGGraphSeries) the specified series or
- (SVGGraphSeries[]) the list of series */
+ /** Retrieve the series wrappers.
+ @param [i] {number} The series index.
+ @return {SVGGraphSeries|SVGGraphSeries[]} The specified series or the list of series. */
series: function(i) {
return (arguments.length > 0 ? this._series[i] : null) || this._series;
},
- /* Suppress drawing of the graph until redraw() is called.
- @return (SVGGraph) this graph object */
+ /** Suppress drawing of the graph until redraw() is called.
+ @return {SVGGraph} This graph object. */
noDraw: function() {
this._drawNow = false;
return this;
},
- /* Redraw the entire graph with the current settings and values.
- @return (SVGGraph) this graph object */
+ /** Redraw the entire graph with the current settings and values.
+ @return {SVGGraph} This graph object. */
redraw: function() {
this._drawNow = true;
this._drawGraph();
return this;
},
- /* Set the callback function for status updates.
- @param onstatus (function) the callback function
- @return (SVGGraph) this graph object */
+ /** Set the callback function for status updates.
+ @param onstatus {function} The callback function.
+ @return {SVGGraph} This graph object. */
status: function(onstatus) {
this._onstatus = onstatus;
return this;
},
- /* Actually draw the graph (if allowed) based on the graph type set. */
+ /** Actually draw the graph (if allowed) based on the graph type set.
+ @private */
_drawGraph: function() {
if (!this._drawNow) {
return;
@@ -317,47 +309,48 @@ $.extend(SVGGraph.prototype, {
// Set sizes if not already there
if (!this._chartCont.width) {
this._chartCont.setAttribute('width',
- parseInt(this._chartCont.getAttribute('width'), 10) || this._wrapper._width());
+ parseInt(this._chartCont.getAttribute('width'), 10) || this._wrapper.width());
}
else if (this._chartCont.width.baseVal) {
- this._chartCont.width.baseVal.value =
- this._chartCont.width.baseVal.value || this._wrapper._width();
+ this._chartCont.width.baseVal.value = this._chartCont.width.baseVal.value || this._wrapper.width();
}
else {
- this._chartCont.width = this._chartCont.width || this._wrapper._width();
+ this._chartCont.width = this._chartCont.width || this._wrapper.width();
}
if (!this._chartCont.height) {
this._chartCont.setAttribute('height',
- parseInt(this._chartCont.getAttribute('height'), 10) || this._wrapper._height());
+ parseInt(this._chartCont.getAttribute('height'), 10) || this._wrapper.height());
}
else if (this._chartCont.height.baseVal) {
- this._chartCont.height.baseVal.value =
- this._chartCont.height.baseVal.value || this._wrapper._height();
+ this._chartCont.height.baseVal.value = this._chartCont.height.baseVal.value || this._wrapper.height();
}
else {
- this._chartCont.height = this._chartCont.height || this._wrapper._height();
+ this._chartCont.height = this._chartCont.height || this._wrapper.height();
}
this._chartType.drawGraph(this);
},
- /* Decode an attribute value.
- @param node the node to examine
- @param name the attribute name
- @return the actual value */
+ /** Decode an attribute value.
+ @private
+ @param node {SVGElement} The node to examine.
+ @param name {string} The attribute name.
+ @return {string} The actual value. */
_getValue: function(node, name) {
return (!node[name] ? parseInt(node.getAttribute(name), 10) :
(node[name].baseVal ? node[name].baseVal.value : node[name]));
},
- /* Draw the graph title - centred. */
+ /** Draw the graph title - centred.
+ @private */
_drawTitle: function() {
this._wrapper.text(this._chartCont, this._getValue(this._chartCont, 'width') / 2,
this._title.offset, this._title.value, this._title.settings);
},
- /* Calculate the actual dimensions of the chart area.
- @param area (number[4]) the area values to evaluate (optional)
- @return (number[4]) an array of dimension values: left, top, width, height */
+ /** Calculate the actual dimensions of the chart area.
+ @private
+ @param [area] {number[]} The area values to evaluate, defaulting to the current ones.
+ @return {number[]} An array of dimension values: left, top, width, height. */
_getDims: function(area) {
area = area || this._area;
var availWidth = this._getValue(this._chartCont, 'width');
@@ -369,10 +362,11 @@ $.extend(SVGGraph.prototype, {
return [left, top, width, height];
},
- /* Draw the chart background, including gridlines.
- @param noXGrid (boolean) true to suppress the x-gridlines, false to draw them (optional)
- @param noYGrid (boolean) true to suppress the y-gridlines, false to draw them (optional)
- @return (element) the background group element */
+ /** Draw the chart background, including gridlines.
+ @private
+ @param [noXGrid=false] {boolean} true to suppress the x-gridlines, false to draw them.
+ @param [noYGrid=false] {boolean} true to suppress the y-gridlines, false to draw them.
+ @return {SVGEelement} The background group element */
_drawChartBackground: function(noXGrid, noYGrid) {
var bg = this._wrapper.group(this._chartCont, {class_: 'background'});
var dims = this._getDims();
@@ -386,12 +380,13 @@ $.extend(SVGGraph.prototype, {
return bg;
},
- /* Draw one set of gridlines.
- @param bg (element) the background group element
- @param axis (SVGGraphAxis) the axis definition
- @param horiz (boolean) true if horizontal, false if vertical
- @param dims (number[]) the left, top, width, height of the chart area
- @param format (object) additional settings for the gridlines */
+ /** Draw one set of gridlines.
+ @private
+ @param bg {SVGElement} The background group element.
+ @param axis {SVGGraphAxis} The axis definition.
+ @param horiz {boolean} true if horizontal, false if vertical.
+ @param dims {number[]} The left, top, width, height of the chart area.
+ @param format {object} Additional settings for the gridlines. */
_drawGridlines: function(bg, axis, horiz, dims, format) {
var g = this._wrapper.group(bg, format);
var scale = (horiz ? dims[this.H] : dims[this.W]) / (axis._scale.max - axis._scale.min);
@@ -406,15 +401,15 @@ $.extend(SVGGraph.prototype, {
}
},
- /* Draw the axes in their standard configuration.
- @param noX (boolean) true to suppress the x-axes, false to draw it (optional) */
+ /** Draw the axes in their standard configuration.
+ @private
+ @param [noX=false] {boolean} true to suppress the x-axes, false to draw it. */
_drawAxes: function(noX) {
var dims = this._getDims();
if (this.xAxis && !noX) {
if (this.xAxis._title) {
this._wrapper.text(this._chartCont, dims[this.X] + dims[this.W] / 2,
- dims[this.Y] + dims[this.H] + this.xAxis._titleOffset,
- this.xAxis._title, this.xAxis._titleFormat);
+ dims[this.Y] + dims[this.H] + this.xAxis._titleOffset, this.xAxis._title, this.xAxis._titleFormat);
}
this._drawAxis(this.xAxis, 'xAxis', dims[this.X], dims[this.Y] + dims[this.H],
dims[this.X] + dims[this.W], dims[this.Y] + dims[this.H]);
@@ -425,37 +420,36 @@ $.extend(SVGGraph.prototype, {
transform: 'translate(' + (dims[this.X] - this.yAxis._titleOffset) + ',' +
(dims[this.Y] + dims[this.H] / 2) + ') rotate(-90)'}, this.yAxis._titleFormat || {}));
}
- this._drawAxis(this.yAxis, 'yAxis', dims[this.X], dims[this.Y],
- dims[this.X], dims[this.Y] + dims[this.H]);
+ this._drawAxis(this.yAxis, 'yAxis', dims[this.X], dims[this.Y], dims[this.X], dims[this.Y] + dims[this.H]);
}
if (this.x2Axis && !noX) {
if (this.x2Axis._title) {
this._wrapper.text(this._chartCont, dims[this.X] + dims[this.W] / 2,
dims[this.X] - this.x2Axis._titleOffset, this.x2Axis._title, this.x2Axis._titleFormat);
}
- this._drawAxis(this.x2Axis, 'x2Axis', dims[this.X], dims[this.Y],
- dims[this.X] + dims[this.W], dims[this.Y]);
+ this._drawAxis(this.x2Axis, 'x2Axis', dims[this.X], dims[this.Y], dims[this.X] + dims[this.W], dims[this.Y]);
}
if (this.y2Axis) {
if (this.y2Axis._title) {
this._wrapper.text(this._chartCont, 0, 0, this.y2Axis._title, $.extend({textAnchor: 'middle',
- transform: 'translate(' + (dims[this.X] + dims[this.W] + this.y2Axis._titleOffset) +
- ',' + (dims[this.Y] + dims[this.H] / 2) + ') rotate(-90)'}, this.y2Axis._titleFormat || {}));
+ transform: 'translate(' + (dims[this.X] + dims[this.W] + this.y2Axis._titleOffset) + ',' +
+ (dims[this.Y] + dims[this.H] / 2) + ') rotate(-90)'}, this.y2Axis._titleFormat || {}));
}
this._drawAxis(this.y2Axis, 'y2Axis', dims[this.X] + dims[this.W], dims[this.Y],
dims[this.X] + dims[this.W], dims[this.Y] + dims[this.H]);
}
},
- /* Draw an axis and its tick marks.
- @param axis (SVGGraphAxis) the axis definition
- @param id (string) the identifier for the axis group element
- @param x1 (number) starting x-coodinate for the axis
- @param y1 (number) starting y-coodinate for the axis
- @param x2 (number) ending x-coodinate for the axis
- @param y2 (number) ending y-coodinate for the axis */
+ /** Draw an axis and its tick marks.
+ @private
+ @param axis {SVGGraphAxis} The axis definition.
+ @param id {string} The identifier for the axis group element.
+ @param x1 {number} Starting x-coodinate for the axis.
+ @param y1 {number} Starting y-coodinate for the axis.
+ @param x2 {number} Ending x-coodinate for the axis.
+ @param y2 {number} Ending y-coodinate for the axis. */
_drawAxis: function(axis, id, x1, y1, x2, y2) {
- var horiz = (y1 == y2);
+ var horiz = (y1 === y2);
var gl = this._wrapper.group(this._chartCont, $.extend({class_: id}, axis._lineFormat));
var gt = this._wrapper.group(this._chartCont, $.extend({class_: id + 'Labels',
textAnchor: (horiz ? 'middle' : 'end')}, axis._labelFormat));
@@ -474,43 +468,42 @@ $.extend(SVGGraph.prototype, {
var count = 0;
while (major <= axis._scale.max || minor <= axis._scale.max) {
var cur = Math.min(major, minor);
- var len = (cur == major ? size : size / 2);
- var v = (horiz ? x1 : y1) +
- (horiz ? cur - axis._scale.min : axis._scale.max - cur) * scale;
- this._wrapper.line(gl, (horiz ? v : x1 + len * offsets[0]),
- (horiz ? y1 + len * offsets[0] : v),
- (horiz ? v : x1 + len * offsets[1]),
- (horiz ? y1 + len * offsets[1] : v));
- if (cur == major) {
+ var len = (cur === major ? size : size / 2);
+ var v = (horiz ? x1 : y1) + (horiz ? cur - axis._scale.min : axis._scale.max - cur) * scale;
+ this._wrapper.line(gl, (horiz ? v : x1 + len * offsets[0]), (horiz ? y1 + len * offsets[0] : v),
+ (horiz ? v : x1 + len * offsets[1]), (horiz ? y1 + len * offsets[1] : v));
+ if (cur === major) {
this._wrapper.text(gt, (horiz ? v : x1 - size), (horiz ? y1 + 2 * size : v),
(axis._labels ? axis._labels[count++] : '' + cur));
}
- major += (cur == major ? axis._ticks.major : 0);
- minor += (cur == minor ? axis._ticks.minor : 0);
+ major += (cur === major ? axis._ticks.major : 0);
+ minor += (cur === minor ? axis._ticks.minor : 0);
}
}
},
- /* Calculate offsets based on axis and tick positions.
- @param axis (SVGGraphAxis) the axis definition
- @param bottomRight (boolean) true if this axis is appearing on the bottom or
- right of the chart area, false if to the top or left
- @return (number[2]) the array of offset multipliers (-1..+1) */
+ /** Calculate offsets based on axis and tick positions.
+ @private
+ @param axis {SVGGraphAxis} The axis definition.
+ @param bottomRight {boolean} true if this axis is appearing on the bottom or
+ right of the chart area, false if to the top or left.
+ @return {number[]} The array of offset multipliers (-1..+1). */
_getTickOffsets: function(axis, bottomRight) {
- return [(axis._ticks.position == (bottomRight ? 'in' : 'out') ||
- axis._ticks.position == 'both' ? -1 : 0),
- (axis._ticks.position == (bottomRight ? 'out' : 'in') ||
- axis._ticks.position == 'both' ? +1 : 0), ];
+ return [(axis._ticks.position === (bottomRight ? 'in' : 'out') || axis._ticks.position === 'both' ? -1 : 0),
+ (axis._ticks.position === (bottomRight ? 'out' : 'in') || axis._ticks.position === 'both' ? +1 : 0), ];
},
- /* Retrieve the standard percentage axis.
- @return (SVGGraphAxis) percentage axis */
+ /** Retrieve the standard percentage axis.
+ @private
+ @return {SVGGraphAxis} Percentage axis. */
_getPercentageAxis: function() {
this._percentageAxis._title = $.svg.graphing.region.percentageText;
return this._percentageAxis;
},
- /* Calculate the column totals across all the series. */
+ /** Calculate the column totals across all the series.
+ @private
+ @return {number[]} The column totals. */
_getTotals: function() {
var totals = [];
var numVal = (this._series.length ? this._series[0]._values.length : 0);
@@ -523,15 +516,15 @@ $.extend(SVGGraph.prototype, {
return totals;
},
- /* Draw the chart legend. */
+ /** Draw the chart legend.
+ @private */
_drawLegend: function() {
if (!this.legend._show) {
return;
}
var g = this._wrapper.group(this._chartCont, {class_: 'legend'});
var dims = this._getDims(this.legend._area);
- this._wrapper.rect(g, dims[this.X], dims[this.Y], dims[this.W], dims[this.H],
- this.legend._bgSettings);
+ this._wrapper.rect(g, dims[this.X], dims[this.Y], dims[this.W], dims[this.H], this.legend._bgSettings);
var horiz = dims[this.W] > dims[this.H];
var numSer = this._series.length;
var offset = (horiz ? dims[this.W] : dims[this.H]) / numSer;
@@ -548,7 +541,11 @@ $.extend(SVGGraph.prototype, {
}
},
- /* Show the current value status on hover. */
+ /** Show the current value status on hover.
+ @private
+ @param elem {string|SVGElement} The selector or SVG element to show the status in.
+ @param label {string} The current label.
+ @param value {number} The current value. */
_showStatus: function(elem, label, value) {
var status = this._onstatus;
if (this._onstatus) {
@@ -558,17 +555,21 @@ $.extend(SVGGraph.prototype, {
}
});
-/* Details about each graph series.
- @param graph (SVGGraph) the owning graph
- @param name (string) the name of this series (optional)
- @param values (number[]) the list of values to be plotted
- @param fill (string) how the series should be displayed
- @param stroke (string) the colour of the (out)line for the series (optional)
- @param strokeWidth (number) the width of the (out)line for the series (optional)
- @param settings (object) additional formatting settings (optional)
- @return (SVGGraphSeries) the new series object */
+/** A graph series definition.
+ @module SVGGraphSeries */
+
+/** Details about each graph series.
+ Created through graph.addSeries().
true to display it, false to hide it.
+ @return {SVGGraphLegend|boolean} This legend object or show the legend? (if no parameters) */
show: function(show) {
- if (arguments.length == 0) {
+ if (arguments.length === 0) {
return this._show;
}
this._show = show;
@@ -833,35 +829,33 @@ $.extend(SVGGraphLegend.prototype, {
return this;
},
- /* Set or retrieve the legend area.
- @param left (number) > 1 is pixels, <= 1 is proportion of width or
- (number[4]) for left, top, right, bottom
- @param top (number) > 1 is pixels, <= 1 is proportion of height
- @param right (number) > 1 is pixels, <= 1 is proportion of width
- @param bottom (number) > 1 is pixels, <= 1 is proportion of height
- @return (SVGGraphLegend) this legend object or
- (number[4]) the legend area: left, top, right, bottom (if no parameters) */
+ /** Set or retrieve the legend area.
+ @param left {number|number[]} > 1 is pixels, <= 1 is proportion of width or array for left, top, right, bottom.
+ @param [top] {number) > 1 is pixels, <= 1 is proportion of height.
+ @param [right] {number) > 1 is pixels, <= 1 is proportion of width.
+ @param [bottom] {number) > 1 is pixels, <= 1 is proportion of height.
+ @return {SVGGraphLegend|number[]} This legend object or the legend area:
+ left, top, right, bottom (if no parameters). */
area: function(left, top, right, bottom) {
- if (arguments.length == 0) {
+ if (arguments.length === 0) {
return this._area;
}
- this._area = (isArray(left) ? left : [left, top, right, bottom]);
+ this._area = ($.isArray(left) ? left : [left, top, right, bottom]);
this._graph._drawGraph();
return this;
},
- /* Set or retrieve additional settings for the legend area.
- @param sampleSize (number) the size of the sample box to display (optional)
- @param bgSettings (object) additional formatting settings for the legend background
- @param textSettings (object) additional formatting settings for the legend text (optional)
- @return (SVGGraphLegend) this legend object or
- (object) bgSettings and textSettings for the legend (if no parameters) */
+ /** Set or retrieve additional settings for the legend area.
+ @param [sampleSize] {number} The size of the sample box to display.
+ @param bgSettings {object} Additional formatting settings for the legend background.
+ @param [textSettings] {object} Additional formatting settings for the legend text.
+ @return {SVGGraphLegend|object} This legend object or
+ bgSettings and textSettings for the legend (if no parameters). */
settings: function(sampleSize, bgSettings, textSettings) {
- if (arguments.length == 0) {
- return {sampleSize: this._sampleSize, bgSettings: this._bgSettings,
- textSettings: this._textSettings};
+ if (arguments.length === 0) {
+ return {sampleSize: this._sampleSize, bgSettings: this._bgSettings, textSettings: this._textSettings};
}
- if (typeof sampleSize != 'number') {
+ if (typeof sampleSize !== 'number') {
textSettings = bgSettings;
bgSettings = sampleSize;
sampleSize = null;
@@ -873,7 +867,8 @@ $.extend(SVGGraphLegend.prototype, {
return this;
},
- /* Return to the parent graph. */
+ /** Return to the parent graph.
+ @return {SVGGraph} The parent graph. */
end: function() {
return this._graph;
}
@@ -881,42 +876,46 @@ $.extend(SVGGraphLegend.prototype, {
//==============================================================================
-/* Round a number to a given number of decimal points. */
+/** Round a number to a given number of decimal points.
+ @private
+ @param num {number} The original value.
+ @param dec {number} The number of decimal points to retain.
+ @return {number} The rounded number. */
function roundNumber(num, dec) {
return Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
}
-var barOptions = ['barWidth (number) - the width of each bar',
- 'barGap (number) - the gap between sets of bars'];
+var barOptions = ['barWidth (number) - the width of each bar', 'barGap (number) - the gap between sets of bars'];
//------------------------------------------------------------------------------
-/* Draw a standard grouped column bar chart. */
+/** Draw a standard grouped column bar chart.
+ @module SVGColumnChart */
function SVGColumnChart() {
}
$.extend(SVGColumnChart.prototype, {
- /* Retrieve the display title for this chart type.
- @return the title */
+ /** Retrieve the display title for this chart type.
+ @return {string} Its title. */
title: function() {
return 'Basic column chart';
},
- /* Retrieve a description of this chart type.
- @return its description */
+ /** Retrieve a description of this chart type.
+ @return {string} Its description. */
description: function() {
return 'Compare sets of values as vertical bars with grouped categories.';
},
- /* Retrieve a list of the options that may be set for this chart type.
- @return options list */
+ /** Retrieve a list of the options that may be set for this chart type.
+ @return {string[]} Its options list. */
options: function() {
return barOptions;
},
- /* Actually draw the graph in this type's style.
- @param graph (object) the SVGGraph object */
+ /** Actually draw the graph in this type's style.
+ @param graph {SVGGraph} The graph object. */
drawGraph: function(graph) {
graph._drawChartBackground(true);
var barWidth = graph._chartOptions.barWidth || 10;
@@ -936,7 +935,16 @@ $.extend(SVGColumnChart.prototype, {
graph._drawLegend();
},
- /* Plot an individual series. */
+ /** Plot an individual series.
+ @private
+ @param graph {SVGGraph} The graph object.
+ @param cur {number} The current series index.
+ @param numSer {number} The number of points in this series.
+ @param barWidth {number} The width of each bar.
+ @param barGap {number} The space between bars.
+ @param dims {number[]} The dimensions of the drawing area.
+ @param xScale {number} The scaling factor in the horizontal direction.
+ @param yScale {number} The scaling factor in the vertical direction. */
_drawSeries: function(graph, cur, numSer, barWidth, barGap, dims, xScale, yScale) {
var series = graph._series[cur];
var g = graph._wrapper.group(this._chart,
@@ -951,7 +959,15 @@ $.extend(SVGColumnChart.prototype, {
}
},
- /* Draw the x-axis and its ticks. */
+ /** Draw the x-axis and its ticks.
+ @private
+ @param graph {SVGGraph} The graph object.
+ @param numSer {number} The number of points in this series.
+ @param numVal {number} The current value index.
+ @param barWidth {number} The width of each bar.
+ @param barGap {number} The space between bars.
+ @param dims {number[]} The dimensions of the drawing area.
+ @param xScale {number} The scaling factor in the horizontal direction. */
_drawXAxis: function(graph, numSer, numVal, barWidth, barGap, dims, xScale) {
var axis = graph.xAxis;
if (axis._title) {
@@ -982,33 +998,34 @@ $.extend(SVGColumnChart.prototype, {
//------------------------------------------------------------------------------
-/* Draw a stacked column bar chart. */
+/** Draw a stacked column bar chart.
+ @module SVGStackedColumnChart */
function SVGStackedColumnChart() {
}
$.extend(SVGStackedColumnChart.prototype, {
- /* Retrieve the display title for this chart type.
- @return the title */
+ /** Retrieve the display title for this chart type.
+ @return {string} Its title. */
title: function() {
return 'Stacked column chart';
},
- /* Retrieve a description of this chart type.
- @return its description */
+ /** Retrieve a description of this chart type.
+ @return {string} Its description. */
description: function() {
return 'Compare sets of values as vertical bars showing ' +
'relative contributions to the whole for each category.';
},
- /* Retrieve a list of the options that may be set for this chart type.
- @return options list */
+ /** Retrieve a list of the options that may be set for this chart type.
+ @return {string[]} Its options list. */
options: function() {
return barOptions;
},
- /* Actually draw the graph in this type's style.
- @param graph (object) the SVGGraph object */
+ /** Actually draw the graph in this type's style.
+ @param graph {SVGGraph} The graph object. */
drawGraph: function(graph) {
var bg = graph._drawChartBackground(true, true);
var dims = graph._getDims();
@@ -1030,13 +1047,21 @@ $.extend(SVGStackedColumnChart.prototype, {
(dims[graph.Y] + dims[graph.H] / 2) + ') rotate(-90)'}, graph.yAxis._titleFormat || {}));
var pAxis = $.extend({}, graph._getPercentageAxis());
$.extend(pAxis._labelFormat, graph.yAxis._labelFormat || {});
- graph._drawAxis(pAxis, 'yAxis', dims[graph.X], dims[graph.Y],
- dims[graph.X], dims[graph.Y] + dims[graph.H]);
+ graph._drawAxis(pAxis, 'yAxis', dims[graph.X], dims[graph.Y], dims[graph.X], dims[graph.Y] + dims[graph.H]);
this._drawXAxis(graph, numVal, barWidth, barGap, dims, xScale);
graph._drawLegend();
},
- /* Plot all of the columns. */
+ /** Plot all of the columns.
+ @private
+ @param graph {SVGGraph} The graph object.
+ @param numSer {number} The number of points in this series.
+ @param numVal {number} The current value index.
+ @param barWidth {number} The width of each bar.
+ @param barGap {number} The space between bars.
+ @param dims {number[]} The dimensions of the drawing area.
+ @param xScale {number} The scaling factor in the horizontal direction.
+ @param yScale {number} The scaling factor in the vertical direction. */
_drawColumns: function(graph, numSer, numVal, barWidth, barGap, dims, xScale, yScale) {
var totals = graph._getTotals();
var accum = [];
@@ -1045,23 +1070,26 @@ $.extend(SVGStackedColumnChart.prototype, {
}
for (var s = 0; s < numSer; s++) {
var series = graph._series[s];
- var g = graph._wrapper.group(this._chart,
- $.extend({class_: 'series' + s, fill: series._fill,
- stroke: series._stroke, strokeWidth: series._strokeWidth},
- series._settings || {}));
+ var g = graph._wrapper.group(this._chart, $.extend({class_: 'series' + s, fill: series._fill,
+ stroke: series._stroke, strokeWidth: series._strokeWidth}, series._settings || {}));
for (var i = 0; i < series._values.length; i++) {
accum[i] += series._values[i];
- var r = graph._wrapper.rect(g,
- dims[graph.X] + xScale * (barGap + i * (barWidth + barGap)),
+ var r = graph._wrapper.rect(g, dims[graph.X] + xScale * (barGap + i * (barWidth + barGap)),
dims[graph.Y] + yScale * (totals[i] - accum[i]) / totals[i],
xScale * barWidth, yScale * series._values[i] / totals[i]);
- graph._showStatus(r, series._name,
- roundNumber(series._values[i] / totals[i] * 100, 2));
+ graph._showStatus(r, series._name, roundNumber(series._values[i] / totals[i] * 100, 2));
}
}
},
- /* Draw the x-axis and its ticks. */
+ /** Draw the x-axis and its ticks.
+ @private
+ @param graph {SVGGraph} The graph object.
+ @param numVal {number} The current value index.
+ @param barWidth {number} The width of each bar.
+ @param barGap {number} The space between bars.
+ @param dims {number[]} The dimensions of the drawing area.
+ @param xScale {number} The scaling factor in the horizontal direction. */
_drawXAxis: function(graph, numVal, barWidth, barGap, dims, xScale) {
var axis = graph.xAxis;
if (axis._title) {
@@ -1092,32 +1120,33 @@ $.extend(SVGStackedColumnChart.prototype, {
//------------------------------------------------------------------------------
-/* Draw a standard grouped row bar chart. */
+/** Draw a standard grouped row bar chart.
+ @module SVGRowChart */
function SVGRowChart() {
}
$.extend(SVGRowChart.prototype, {
- /* Retrieve the display title for this chart type.
- @return the title */
+ /** Retrieve the display title for this chart type.
+ @return {string} Its title. */
title: function() {
return 'Basic row chart';
},
- /* Retrieve a description of this chart type.
- @return its description */
+ /** Retrieve a description of this chart type.
+ @return {string} Its description. */
description: function() {
return 'Compare sets of values as horizontal rows with grouped categories.';
},
- /* Retrieve a list of the options that may be set for this chart type.
- @return options list */
+ /** Retrieve a list of the options that may be set for this chart type.
+ @return {string[]} Its options list. */
options: function() {
return barOptions;
},
- /* Actually draw the graph in this type's style.
- @param graph (object) the SVGGraph object */
+ /** Actually draw the graph in this type's style.
+ @param graph {SVGGraph} The graph object. */
drawGraph: function(graph) {
var bg = graph._drawChartBackground(true, true);
var dims = graph._getDims();
@@ -1137,23 +1166,37 @@ $.extend(SVGRowChart.prototype, {
graph._drawLegend();
},
- /* Plot an individual series. */
+ /** Plot an individual series.
+ @private
+ @param graph {SVGGraph} The graph object.
+ @param cur {number} The current series index.
+ @param numSer {number} The number of points in this series.
+ @param barWidth {number} The width of each bar.
+ @param barGap {number} The space between bars.
+ @param dims {number[]} The dimensions of the drawing area.
+ @param xScale {number} The scaling factor in the horizontal direction.
+ @param yScale {number} The scaling factor in the vertical direction. */
_drawSeries: function(graph, cur, numSer, barWidth, barGap, dims, xScale, yScale) {
var series = graph._series[cur];
- var g = graph._wrapper.group(this._chart,
- $.extend({class_: 'series' + cur, fill: series._fill,
- stroke: series._stroke, strokeWidth: series._strokeWidth},
- series._settings || {}));
+ var g = graph._wrapper.group(this._chart, $.extend({class_: 'series' + cur, fill: series._fill,
+ stroke: series._stroke, strokeWidth: series._strokeWidth}, series._settings || {}));
for (var i = 0; i < series._values.length; i++) {
- var r = graph._wrapper.rect(g,
- dims[graph.X] + xScale * (0 - graph.yAxis._scale.min),
+ var r = graph._wrapper.rect(g, dims[graph.X] + xScale * (0 - graph.yAxis._scale.min),
dims[graph.Y] + yScale * (barGap + i * (numSer * barWidth + barGap) + (cur * barWidth)),
xScale * series._values[i], yScale * barWidth);
graph._showStatus(r, series._name, series._values[i]);
}
},
- /* Draw the axes for this graph. */
+ /** Draw the axes for this graph.
+ @private
+ @param graph {SVGGraph} The graph object.
+ @param numSer {number} The number of points in this series.
+ @param numVal {number} The current value index.
+ @param barWidth {number} The width of each bar.
+ @param barGap {number} The space between bars.
+ @param dims {number[]} The dimensions of the drawing area.
+ @param yScale {number} The scaling factor in the vertical direction. */
_drawAxes: function(graph, numSer, numVal, barWidth, barGap, dims, yScale) {
// X-axis
var axis = graph.yAxis;
@@ -1194,33 +1237,34 @@ $.extend(SVGRowChart.prototype, {
//------------------------------------------------------------------------------
-/* Draw a stacked row bar chart. */
+/** Draw a stacked row bar chart.
+ @module SVGStackedRowChart */
function SVGStackedRowChart() {
}
$.extend(SVGStackedRowChart.prototype, {
- /* Retrieve the display title for this chart type.
- @return the title */
+ /** Retrieve the display title for this chart type.
+ @return {string} Its title. */
title: function() {
return 'Stacked row chart';
},
- /* Retrieve a description of this chart type.
- @return its description */
+ /** Retrieve a description of this chart type.
+ @return {string} Its description. */
description: function() {
return 'Compare sets of values as horizontal bars showing ' +
'relative contributions to the whole for each category.';
},
- /* Retrieve a list of the options that may be set for this chart type.
- @return options list */
+ /** Retrieve a list of the options that may be set for this chart type.
+ @return {string[]} Its options list. */
options: function() {
return barOptions;
},
- /* Actually draw the graph in this type's style.
- @param graph (object) the SVGGraph object */
+ /** Actually draw the graph in this type's style.
+ @param graph {SVGGraph} The graph object. */
drawGraph: function(graph) {
var bg = graph._drawChartBackground(true, true);
var dims = graph._getDims();
@@ -1237,8 +1281,7 @@ $.extend(SVGStackedRowChart.prototype, {
this._drawRows(graph, numSer, numVal, barWidth, barGap, dims, xScale, yScale);
graph._drawTitle();
graph._wrapper.text(graph._chartCont, dims[graph.X] + dims[graph.W] / 2,
- dims[graph.Y] + dims[graph.H] + graph.xAxis._titleOffset,
- $.svg.graphing.region.percentageText,
+ dims[graph.Y] + dims[graph.H] + graph.xAxis._titleOffset, $.svg.graphing.region.percentageText,
$.extend({textAnchor: 'middle'}, graph.yAxis._titleFormat || {}));
var pAxis = $.extend({}, graph._getPercentageAxis());
$.extend(pAxis._labelFormat, graph.yAxis._labelFormat || {});
@@ -1248,7 +1291,16 @@ $.extend(SVGStackedRowChart.prototype, {
graph._drawLegend();
},
- /* Plot all of the rows. */
+ /** Plot all of the rows.
+ @private
+ @param graph {SVGGraph} The graph object.
+ @param numSer {number} The number of points in this series.
+ @param numVal {number} The current value index.
+ @param barWidth {number} The width of each bar.
+ @param barGap {number} The space between bars.
+ @param dims {number[]} The dimensions of the drawing area.
+ @param xScale {number} The scaling factor in the horizontal direction.
+ @param yScale {number} The scaling factor in the vertical direction. */
_drawRows: function(graph, numSer, numVal, barWidth, barGap, dims, xScale, yScale) {
var totals = graph._getTotals();
var accum = [];
@@ -1257,23 +1309,26 @@ $.extend(SVGStackedRowChart.prototype, {
}
for (var s = 0; s < numSer; s++) {
var series = graph._series[s];
- var g = graph._wrapper.group(this._chart,
- $.extend({class_: 'series' + s, fill: series._fill,
- stroke: series._stroke, strokeWidth: series._strokeWidth},
- series._settings || {}));
+ var g = graph._wrapper.group(this._chart, $.extend({class_: 'series' + s, fill: series._fill,
+ stroke: series._stroke, strokeWidth: series._strokeWidth}, series._settings || {}));
for (var i = 0; i < series._values.length; i++) {
- var r = graph._wrapper.rect(g,
- dims[graph.X] + xScale * accum[i] / totals[i],
+ var r = graph._wrapper.rect(g, dims[graph.X] + xScale * accum[i] / totals[i],
dims[graph.Y] + yScale * (barGap + i * (barWidth + barGap)),
xScale * series._values[i] / totals[i], yScale * barWidth);
- graph._showStatus(r, series._name,
- roundNumber(series._values[i] / totals[i] * 100, 2));
+ graph._showStatus(r, series._name, roundNumber(series._values[i] / totals[i] * 100, 2));
accum[i] += series._values[i];
}
}
},
- /* Draw the y-axis and its ticks. */
+ /** Draw the y-axis and its ticks.
+ @private
+ @param graph {SVGGraph} The graph object.
+ @param numVal {number} The current value index.
+ @param barWidth {number} The width of each bar.
+ @param barGap {number} The space between bars.
+ @param dims {number[]} The dimensions of the drawing area.
+ @param yScale {number} The scaling factor in the vertical direction. */
_drawYAxis: function(graph, numVal, barWidth, barGap, dims, yScale) {
var axis = graph.xAxis;
if (axis._title) {
@@ -1281,12 +1336,10 @@ $.extend(SVGStackedRowChart.prototype, {
transform: 'translate(' + (dims[graph.X] - axis._titleOffset) + ',' +
(dims[graph.Y] + dims[graph.H] / 2) + ') rotate(-90)'}, axis._titleFormat || {}));
}
- var gl = graph._wrapper.group(graph._chartCont,
- $.extend({class_: 'yAxis'}, axis._lineFormat));
+ var gl = graph._wrapper.group(graph._chartCont, $.extend({class_: 'yAxis'}, axis._lineFormat));
var gt = graph._wrapper.group(graph._chartCont,
$.extend({class_: 'yAxisLabels', textAnchor: 'end'}, axis._labelFormat));
- graph._wrapper.line(gl, dims[graph.X], dims[graph.Y],
- dims[graph.X], dims[graph.Y] + dims[graph.H]);
+ graph._wrapper.line(gl, dims[graph.X], dims[graph.Y], dims[graph.X], dims[graph.Y] + dims[graph.H]);
if (axis._ticks.major) {
var offsets = graph._getTickOffsets(axis, false);
for (var i = 1; i < numVal; i++) {
@@ -1305,32 +1358,33 @@ $.extend(SVGStackedRowChart.prototype, {
//------------------------------------------------------------------------------
-/* Draw a standard line chart. */
+/** Draw a standard line chart.
+ @module SVGLineChart */
function SVGLineChart() {
}
$.extend(SVGLineChart.prototype, {
- /* Retrieve the display title for this chart type.
- @return the title */
+ /** Retrieve the display title for this chart type.
+ @return {string} Its title. */
title: function() {
return 'Basic line chart';
},
- /* Retrieve a description of this chart type.
- @return its description */
+ /** Retrieve a description of this chart type.
+ @return {string} Its description. */
description: function() {
return 'Compare sets of values as continuous lines.';
},
- /* Retrieve a list of the options that may be set for this chart type.
- @return options list */
+ /** Retrieve a list of the options that may be set for this chart type.
+ @return {string[]} Its options list. */
options: function() {
return [];
},
- /* Actually draw the graph in this type's style.
- @param graph (object) the SVGGraph object */
+ /** Actually draw the graph in this type's style.
+ @param graph {SVGGraph} The graph object. */
drawGraph: function(graph) {
graph._drawChartBackground();
var dims = graph._getDims();
@@ -1345,30 +1399,36 @@ $.extend(SVGLineChart.prototype, {
graph._drawLegend();
},
- /* Plot an individual series. */
+ /** Plot an individual series.
+ @private
+ @param graph {SVGGraph} The graph object.
+ @param cur {number} The current series index.
+ @param dims {number[]} The dimensions of the drawing area.
+ @param xScale {number} The scaling factor in the horizontal direction.
+ @param yScale {number} The scaling factor in the vertical direction. */
_drawSeries: function(graph, cur, dims, xScale, yScale) {
var series = graph._series[cur];
var path = graph._wrapper.createPath();
for (var i = 0; i < series._values.length; i++) {
var x = dims[graph.X] + i * xScale;
var y = dims[graph.Y] + (graph.yAxis._scale.max - series._values[i]) * yScale;
- if (i == 0) {
+ if (i === 0) {
path.move(x, y);
}
else {
path.line(x, y);
}
}
- var p = graph._wrapper.path(this._chart, path,
- $.extend({id: 'series' + cur, fill: 'none', stroke: series._stroke,
- strokeWidth: series._strokeWidth}, series._settings || {}));
+ var p = graph._wrapper.path(this._chart, path, $.extend({id: 'series' + cur, fill: 'none',
+ stroke: series._stroke, strokeWidth: series._strokeWidth}, series._settings || {}));
graph._showStatus(p, series._name, 0);
}
});
//------------------------------------------------------------------------------
-/* Draw a standard pie chart. */
+/** Draw a standard pie chart.
+ @module SVGPieChart */
function SVGPieChart() {
}
@@ -1378,26 +1438,26 @@ $.extend(SVGPieChart.prototype, {
'explodeDist (number) - the distance to move an exploded section',
'pieGap (number) - the distance between pies for multiple values'],
- /* Retrieve the display title for this chart type.
- @return the title */
+ /** Retrieve the display title for this chart type.
+ @return {string} Its title. */
title: function() {
return 'Pie chart';
},
- /* Retrieve a description of this chart type.
- @return its description */
+ /** Retrieve a description of this chart type.
+ @return {string} Its description. */
description: function() {
return 'Compare relative sizes of values as contributions to the whole.';
},
- /* Retrieve a list of the options that may be set for this chart type.
- @return options list */
+ /** Retrieve a list of the options that may be set for this chart type.
+ @return {string[]} Its options list. */
options: function() {
return this._options;
},
- /* Actually draw the graph in this type's style.
- @param graph (object) the SVGGraph object */
+ /** Actually draw the graph in this type's style.
+ @param graph {SVGGraph} The graph object. */
drawGraph: function(graph) {
graph._drawChartBackground(true, true);
this._chart = graph._wrapper.group(graph._chartCont, {class_: 'chart'});
@@ -1407,14 +1467,17 @@ $.extend(SVGPieChart.prototype, {
graph._drawLegend();
},
- /* Plot all the series. */
+ /** Plot all the series.
+ @private
+ @param graph {SVGGraph} The graph object.
+ @param dims {number[]} The dimensions of the drawing area. */
_drawSeries: function(graph, dims) {
var totals = graph._getTotals();
var numSer = graph._series.length;
var numVal = (numSer ? (graph._series[0])._values.length : 0);
var path = graph._wrapper.createPath();
var explode = graph._chartOptions.explode || [];
- explode = (isArray(explode) ? explode : [explode]);
+ explode = ($.isArray(explode) ? explode : [explode]);
var explodeDist = graph._chartOptions.explodeDist || 10;
var pieGap = (numVal <= 1 ? 0 : graph._chartOptions.pieGap || 10);
var xBase = (dims[graph.W] - (numVal * pieGap) - pieGap) / numVal / 2;
@@ -1429,12 +1492,12 @@ $.extend(SVGPieChart.prototype, {
var curTotal = 0;
for (var j = 0; j < numSer; j++) {
var series = graph._series[j];
- if (i == 0) {
- gl[j] = graph._wrapper.group(this._chart, $.extend({class_: 'series' + j,
- fill: series._fill, stroke: series._stroke,
+ if (i === 0) {
+ gl[j] = graph._wrapper.group(this._chart,
+ $.extend({class_: 'series' + j, fill: series._fill, stroke: series._stroke,
strokeWidth: series._strokeWidth}, series._settings || {}));
}
- if (series._values[i] == 0) {
+ if (series._values[i] === 0) {
continue;
}
var start = (curTotal / totals[i]) * 2 * Math.PI;
@@ -1442,7 +1505,7 @@ $.extend(SVGPieChart.prototype, {
var end = (curTotal / totals[i]) * 2 * Math.PI;
var exploding = false;
for (var k = 0; k < explode.length; k++) {
- if (explode[k] == j) {
+ if (explode[k] === j) {
exploding = true;
break;
}
@@ -1453,8 +1516,7 @@ $.extend(SVGPieChart.prototype, {
line(x + radius * Math.cos(start), y + radius * Math.sin(start)).
arc(radius, radius, 0, (end - start < Math.PI ? 0 : 1), 1,
x + radius * Math.cos(end), y + radius * Math.sin(end)).close());
- graph._showStatus(p, series._name,
- roundNumber((end - start) / 2 / Math.PI * 100, 2));
+ graph._showStatus(p, series._name, roundNumber((end - start) / 2 / Math.PI * 100, 2));
}
if (graph.xAxis) {
graph._wrapper.text(gt, cx, dims[graph.Y] + dims[graph.H] + graph.xAxis._titleOffset,
@@ -1466,11 +1528,6 @@ $.extend(SVGPieChart.prototype, {
//------------------------------------------------------------------------------
-/* Determine whether an object is an array. */
-function isArray(a) {
- return (a && a.constructor == Array);
-}
-
// Basic chart types
$.svg.graphing.addChartType('column', new SVGColumnChart());
$.svg.graphing.addChartType('stackedColumn', new SVGStackedColumnChart());
diff --git a/jquery.svggraph.min.js b/jquery.svggraph.min.js
index f693148..84a5285 100644
--- a/jquery.svggraph.min.js
+++ b/jquery.svggraph.min.js
@@ -1,7 +1,6 @@
-/* http://keith-wood.name/svg.html
- SVG graphing extension for jQuery v1.4.5.
+/* http://keith-wood.name/svg.html
+ SVG graphing extension for jQuery v1.5.0.
Written by Keith Wood (kbwood{at}iinet.com.au) August 2007.
- Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and
- MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses.
+ Available under the MIT (http://keith-wood.name/licence.html) license.
Please attribute the author if you use it. */
-(function($){$.svg.addExtension('graph',SVGGraph);$.svg.graphing=new SVGGraphing();function SVGGraphing(){this.regional=[];this.regional['']={percentageText:'Percentage'};this.region=this.regional['']}$.extend(SVGGraphing.prototype,{_chartTypes:[],addChartType:function(a,b){this._chartTypes[a]=b},chartTypes:function(){return this._chartTypes}});function SVGGraph(a){this._wrapper=a;this._drawNow=false;for(var b in $.svg.graphing._chartTypes){this._chartType=$.svg.graphing._chartTypes[b];break}this._chartOptions={};this._title={value:'',offset:25,settings:{textAnchor:'middle'}};this._area=[0.1,0.1,0.8,0.9];this._chartFormat={fill:'none',stroke:'black'};this._gridlines=[];this._series=[];this._onstatus=null;this._chartCont=this._wrapper.svg(0,0,0,0,{class_:'svg-graph'});this.xAxis=new SVGGraphAxis(this);this.xAxis.title('',40);this.yAxis=new SVGGraphAxis(this);this.yAxis.title('',40);this.x2Axis=null;this.y2Axis=null;this.legend=new SVGGraphLegend(this);this._drawNow=true}$.extend(SVGGraph.prototype,{X:0,Y:1,W:2,H:3,L:0,T:1,R:2,B:3,_percentageAxis:new SVGGraphAxis(this,$.svg.graphing.region.percentageText,0,100,10,0),container:function(a){if(arguments.length==0){return this._chartCont}this._chartCont=a;return this},chartType:function(a,b){return(arguments.length==0?this.type():this.type(a,b))},type:function(a,b){if(arguments.length==0){return this._chartType}var c=$.svg.graphing._chartTypes[a];if(c){this._chartType=c;this._chartOptions=$.extend({},b||{})}this._drawGraph();return this},chartOptions:function(a){return(arguments.length==0?this.options():this.options(a))},options:function(a){if(arguments.length==0){return this._chartOptions}this._chartOptions=$.extend({},a);this._drawGraph();return this},chartFormat:function(a,b,c){return(arguments.length==0?this.format():this.format(a,b,c))},format:function(a,b,c){if(arguments.length==0){return this._chartFormat}if(typeof b=='object'){c=b;b=null}this._chartFormat=$.extend({fill:a},(b?{stroke:b}:{}),c||{});this._drawGraph();return this},chartArea:function(a,b,c,d){return(arguments.length==0?this.area():this.area(a,b,c,d))},area:function(a,b,c,d){if(arguments.length==0){return this._area}this._area=(isArray(a)?a:[a,b,c,d]);this._drawGraph();return this},gridlines:function(a,b){if(arguments.length==0){return this._gridlines}this._gridlines=[(typeof a=='string'?{stroke:a}:a),(typeof b=='string'?{stroke:b}:b)];if(this._gridlines[0]==null&&this._gridlines[1]==null){this._gridlines=[]}this._drawGraph();return this},title:function(a,b,c,d){if(arguments.length==0){return this._title}if(typeof b!='number'){d=c;c=b;b=null}if(typeof c!='string'){d=c;c=null}this._title={value:a,offset:b||this._title.offset,settings:$.extend({textAnchor:'middle'},(c?{fill:c}:{}),d||{})};this._drawGraph();return this},addSeries:function(a,b,c,d,e,f){this._series.push(new SVGGraphSeries(this,a,b,c,d,e,f));this._drawGraph();return this},series:function(i){return(arguments.length>0?this._series[i]:null)||this._series},noDraw:function(){this._drawNow=false;return this},redraw:function(){this._drawNow=true;this._drawGraph();return this},status:function(a){this._onstatus=a;return this},_drawGraph:function(){if(!this._drawNow){return}while(this._chartCont.firstChild){this._chartCont.removeChild(this._chartCont.firstChild)}if(!this._chartCont.parent){this._wrapper._svg.appendChild(this._chartCont)}if(!this._chartCont.width){this._chartCont.setAttribute('width',parseInt(this._chartCont.getAttribute('width'),10)||this._wrapper._width())}else if(this._chartCont.width.baseVal){this._chartCont.width.baseVal.value=this._chartCont.width.baseVal.value||this._wrapper._width()}else{this._chartCont.width=this._chartCont.width||this._wrapper._width()}if(!this._chartCont.height){this._chartCont.setAttribute('height',parseInt(this._chartCont.getAttribute('height'),10)||this._wrapper._height())}else if(this._chartCont.height.baseVal){this._chartCont.height.baseVal.value=this._chartCont.height.baseVal.value||this._wrapper._height()}else{this._chartCont.height=this._chartCont.height||this._wrapper._height()}this._chartType.drawGraph(this)},_getValue:function(a,b){return(!a[b]?parseInt(a.getAttribute(b),10):(a[b].baseVal?a[b].baseVal.value:a[b]))},_drawTitle:function(){this._wrapper.text(this._chartCont,this._getValue(this._chartCont,'width')/2,this._title.offset,this._title.value,this._title.settings)},_getDims:function(a){a=a||this._area;var b=this._getValue(this._chartCont,'width');var c=this._getValue(this._chartCont,'height');var d=(a[this.L]>1?a[this.L]:b*a[this.L]);var e=(a[this.T]>1?a[this.T]:c*a[this.T]);var f=(a[this.R]>1?a[this.R]:b*a[this.R])-d;var g=(a[this.B]>1?a[this.B]:c*a[this.B])-e;return[d,e,f,g]},_drawChartBackground:function(a,b){var c=this._wrapper.group(this._chartCont,{class_:'background'});var d=this._getDims();this._wrapper.rect(c,d[this.X],d[this.Y],d[this.W],d[this.H],this._chartFormat);if(this._gridlines[0]&&this.yAxis._ticks.major&&!b){this._drawGridlines(c,this.yAxis,true,d,this._gridlines[0])}if(this._gridlines[1]&&this.xAxis._ticks.major&&!a){this._drawGridlines(c,this.xAxis,false,d,this._gridlines[1])}return c},_drawGridlines:function(a,b,c,d,e){var g=this._wrapper.group(a,e);var f=(c?d[this.H]:d[this.W])/(b._scale.max-b._scale.min);var h=Math.floor(b._scale.min/b._ticks.major)*b._ticks.major;h=(hnull for none.
+ @param ySettings {string|object} The colour of the gridlines along the y-axis,
+ or formatting for the gridlines along the y-axis, or null for none.
+ @return {SVGPlot|object[]} This plot object or the gridlines formatting (if no parameters). */
gridlines: function(xSettings, ySettings) {
- if (arguments.length == 0) {
+ if (arguments.length === 0) {
return this._gridlines;
}
- this._gridlines = [(typeof xSettings == 'string' ? {stroke: xSettings} : xSettings),
- (typeof ySettings == 'string' ? {stroke: ySettings} : ySettings)];
+ this._gridlines = [(typeof xSettings === 'string' ? {stroke: xSettings} : xSettings),
+ (typeof ySettings === 'string' ? {stroke: ySettings} : ySettings)];
if (this._gridlines[0] == null && this._gridlines[1] == null) {
this._gridlines = [];
}
@@ -117,94 +120,90 @@ $.extend(SVGPlot.prototype, {
return this;
},
- /* Set or retrieve the equality of the x- and y-axes.
- @param value (boolean) true for equal x- and y-units, false to fill the available space
- @return (SVGPlot) this plot object or
- (boolean) the current setting (if no parameters) */
+ /** Set or retrieve the equality of the x- and y-axes.
+ @param value {boolean} true for equal x- and y-units,
+ false to fill the available space.
+ @return {SVGPlot|boolean} This plot object or the current setting (if no parameters). */
equalXY: function(value) {
- if (arguments.length == 0) {
+ if (arguments.length === 0) {
return this._equalXY;
}
this._equalXY = value;
return this;
},
- /* Set or retrieve the title of the plot and its formatting.
- @param value (string) the title
- @param offset (number) the vertical positioning of the title
- > 1 is pixels, <= 1 is proportion of width (optional)
- @param colour (string) the colour of the title (optional)
- @param settings (object) formatting for the title (optional)
- @return (SVGPlot) this plot object or
- (object) value, offset, and settings for the title (if no parameters) */
+ /** Set or retrieve the title of the plot and its formatting.
+ @param value {string} The title.
+ @param [offset] {number} The vertical positioning of the title, > 1 is pixels, <= 1 is proportion of width.
+ @param [colour] {string} The colour of the title.
+ @param [settings] {object} Formatting for the title.
+ @return {SVGPlot|object} This plot object or value, offset, and settings for the title (if no parameters). */
title: function(value, offset, colour, settings) {
- if (arguments.length == 0) {
+ if (arguments.length === 0) {
return this._title;
}
- if (typeof offset != 'number') {
+ if (typeof offset !== 'number') {
settings = colour;
colour = offset;
offset = null;
}
- if (typeof colour != 'string') {
+ if (typeof colour !== 'string') {
settings = colour;
colour = null;
}
this._title = {value: value, offset: offset || this._title.offset,
- settings: $.extend({textAnchor: 'middle'},
- (colour ? {fill: colour} : {}), settings || {})};
+ settings: $.extend({textAnchor: 'middle'}, (colour ? {fill: colour} : {}), settings || {})};
this._drawPlot();
return this;
},
- /* Add a function to be plotted on the plot.
- @param name (string) the name of this series (optional)
- @param fn (function) the function to be plotted
- @param range (number[2]) the range of values to plot (optional)
- @param points (number) the number of points to plot within this range (optional)
- @param stroke (string) the colour of the plotted lines (optional)
- @param strokeWidth (number) the width of the plotted lines (optional)
- @param settings (object) additional settings for the plotted values (optional)
- @return (SVGPlot) this plot object */
+ /** Add a function to be plotted on the plot.
+ @param [name] {string} The name of this series.
+ @param fn {function} The function to be plotted.
+ @param [range] {number[]} The range of values to plot.
+ @param [points] {number} The number of points to plot within this range.
+ @param [stroke] {string} The colour of the plotted lines.
+ @param [strokeWidth] {number} The width of the plotted lines.
+ @param [settings] {object} Additional settings for the plotted values.
+ @return {SVGPlot} This plot object. */
addFunction: function(name, fn, range, points, stroke, strokeWidth, settings) {
- this._functions.push(new SVGPlotFunction(
- this, name, fn, range, points, stroke, strokeWidth, settings));
+ this._functions.push(new SVGPlotFunction(this, name, fn, range, points, stroke, strokeWidth, settings));
this._drawPlot();
return this;
},
- /* Retrieve the function wrappers.
- @param i (number) the function index (optional)
- @return (SVGPlotFunction) the specified function or
- (SVGPlotFunction[]) the list of functions */
+ /** Retrieve the function wrappers.
+ @param [i] {number} the function index.
+ @return {SVGPlotFunction|SVGPlotFunction[]} the specified function or the list of functions. */
functions: function(i) {
return (arguments.length > 0 ? this._functions[i] : null) || this._functions;
},
- /* Suppress drawing of the plot until redraw() is called.
- @return (SVGPlot) this plot object */
+ /** Suppress drawing of the plot until redraw() is called.
+ @return {SVGPlot} this plot object. */
noDraw: function() {
this._drawNow = false;
return this;
},
- /* Redraw the entire plot with the current settings and values.
- @return (SVGPlot) this plot object */
+ /** Redraw the entire plot with the current settings and values.
+ @return {SVGPlot} This plot object. */
redraw: function() {
this._drawNow = true;
this._drawPlot();
return this;
},
- /* Set the callback function for status updates.
- @param onstatus (function) the callback function
- @return (SVGPlot) this plot object */
+ /** Set the callback function for status updates.
+ @param onstatus {function} The callback function.
+ @return {SVGPlot} This plot object. */
status: function(onstatus) {
this._onstatus = onstatus;
return this;
},
- /* Actually draw the plot (if allowed). */
+ /** Actually draw the plot (if allowed).
+ @private */
_drawPlot: function() {
if (!this._drawNow) {
return;
@@ -218,25 +217,23 @@ $.extend(SVGPlot.prototype, {
// Set sizes if not already there
if (!this._plotCont.width) {
this._plotCont.setAttribute('width',
- parseInt(this._plotCont.getAttribute('width'), 10) || this._wrapper._width());
+ parseInt(this._plotCont.getAttribute('width'), 10) || this._wrapper.width());
}
else if (this._plotCont.width.baseVal) {
- this._plotCont.width.baseVal.value =
- this._plotCont.width.baseVal.value || this._wrapper._width();
+ this._plotCont.width.baseVal.value = this._plotCont.width.baseVal.value || this._wrapper.width();
}
else {
- this._plotCont.width = this._plotCont.width || this._wrapper._width();
+ this._plotCont.width = this._plotCont.width || this._wrapper.width();
}
if (!this._plotCont.height) {
this._plotCont.setAttribute('height',
- parseInt(this._plotCont.getAttribute('height'), 10) || this._wrapper._height());
+ parseInt(this._plotCont.getAttribute('height'), 10) || this._wrapper.height());
}
else if (this._plotCont.height.baseVal) {
- this._plotCont.height.baseVal.value =
- this._plotCont.height.baseVal.value || this._wrapper._height();
+ this._plotCont.height.baseVal.value = this._plotCont.height.baseVal.value || this._wrapper.height();
}
else {
- this._plotCont.height = this._plotCont.height || this._wrapper._height();
+ this._plotCont.height = this._plotCont.height || this._wrapper.height();
}
this._drawChartBackground();
var dims = this._getDims();
@@ -253,18 +250,20 @@ $.extend(SVGPlot.prototype, {
this._drawLegend();
},
- /* Decode an attribute value.
- @param node the node to examine
- @param name the attribute name
- @return the actual value */
+ /** Decode an attribute value.
+ @private
+ @param node {SVGElement} The node to examine.
+ @param name {string} The attribute name.
+ @return {string} The actual value. */
_getValue: function(node, name) {
return (!node[name] ? parseInt(node.getAttribute(name), 10) :
(node[name].baseVal ? node[name].baseVal.value : node[name]));
},
- /* Calculate the actual dimensions of the plot area.
- @param area (number[4]) the area values to evaluate (optional)
- @return (number[4]) an array of dimension values: left, top, width, height */
+ /** Calculate the actual dimensions of the plot area.
+ @private
+ @param [area] {number[]} The area values to evaluate, or the current area if not specified.
+ @return {number[]} An array of dimension values: left, top, width, height. */
_getDims: function(area) {
var otherArea = (area != null);
area = area || this._area;
@@ -283,18 +282,20 @@ $.extend(SVGPlot.prototype, {
return [left, top, width, height];
},
- /* Calculate the scaling factors for the plot area.
- @return (number[2]) the x- and y-scaling factors */
+ /** Calculate the scaling factors for the plot area.
+ @private
+ @return {number[]} The x- and y-scaling factors. */
_getScales: function() {
var dims = this._getDims();
return [dims[this.W] / (this.xAxis._scale.max - this.xAxis._scale.min),
dims[this.H] / (this.yAxis._scale.max - this.yAxis._scale.min)];
},
- /* Draw the chart background, including gridlines.
- @param noXGrid (boolean) true to suppress the x-gridlines, false to draw them (optional)
- @param noYGrid (boolean) true to suppress the y-gridlines, false to draw them (optional)
- @return (element) the background group element */
+ /** Draw the chart background, including gridlines.
+ @private
+ @param [noXGrid] {boolean} true to suppress the x-gridlines, false to draw them.
+ @param [noYGrid] {boolean} true to suppress the y-gridlines, false to draw them.
+ @return {SVGElement} The background group element. */
_drawChartBackground: function(noXGrid, noYGrid) {
var bg = this._wrapper.group(this._plotCont, {class_: 'background'});
var dims = this._getDims();
@@ -308,10 +309,11 @@ $.extend(SVGPlot.prototype, {
return bg;
},
- /* Draw one set of gridlines.
- @param bg (element) the background group element
- @param horiz (boolean) true if horizontal, false if vertical
- @param format (object) additional settings for the gridlines */
+ /** Draw one set of gridlines.
+ @private
+ @param bg {SVGElement} The background group element.
+ @param horiz {boolean} true if horizontal, false if vertical.
+ @param format {object} Additional settings for the gridlines. */
_drawGridlines: function(bg, horiz, format, dims) {
var g = this._wrapper.group(bg, format);
var axis = (horiz ? this.yAxis : this.xAxis);
@@ -327,8 +329,9 @@ $.extend(SVGPlot.prototype, {
}
},
- /* Draw an axis, its tick marks, and title.
- @param horiz (boolean) true for x-axis, false for y-axis */
+ /** Draw an axis, its tick marks, and title.
+ @private
+ @param horiz {boolean} true for x-axis, false for y-axis. */
_drawAxis: function(horiz) {
var id = (horiz ? 'x' : 'y') + 'Axis';
var axis = (horiz ? this.xAxis : this.yAxis);
@@ -341,8 +344,7 @@ $.extend(SVGPlot.prototype, {
var zero = (horiz ? axis2._scale.max : -axis2._scale.min) *
scales[horiz ? 1 : 0] + (horiz ? dims[this.Y] : dims[this.X]);
this._wrapper.line(gl, (horiz ? dims[this.X] : zero), (horiz ? zero : dims[this.Y]),
- (horiz ? dims[this.X] + dims[this.W] : zero),
- (horiz ? zero : dims[this.Y] + dims[this.H]));
+ (horiz ? dims[this.X] + dims[this.W] : zero), (horiz ? zero : dims[this.Y] + dims[this.H]));
if (axis._ticks.major) {
var size = axis._ticks.size;
var major = Math.floor(axis._scale.min / axis._ticks.major) * axis._ticks.major;
@@ -350,23 +352,20 @@ $.extend(SVGPlot.prototype, {
var minor = (!axis._ticks.minor ? axis._scale.max + 1 :
Math.floor(axis._scale.min / axis._ticks.minor) * axis._ticks.minor);
minor = (minor < axis._scale.min ? minor + axis._ticks.minor : minor);
- var offsets = [(axis._ticks.position == 'nw' || axis._ticks.position == 'both' ? -1 : 0),
- (axis._ticks.position == 'se' || axis._ticks.position == 'both' ? +1 : 0)];
+ var offsets = [(axis._ticks.position === 'nw' || axis._ticks.position === 'both' ? -1 : 0),
+ (axis._ticks.position === 'se' || axis._ticks.position === 'both' ? +1 : 0)];
while (major <= axis._scale.max || minor <= axis._scale.max) {
var cur = Math.min(major, minor);
- var len = (cur == major ? size : size / 2);
+ var len = (cur === major ? size : size / 2);
var xy = (horiz ? cur - axis._scale.min : axis._scale.max - cur) *
scales[horiz ? 0 : 1] + (horiz ? dims[this.X] : dims[this.Y]);
- this._wrapper.line(gl, (horiz ? xy : zero + len * offsets[0]),
- (horiz ? zero + len * offsets[0] : xy),
- (horiz ? xy : zero + len * offsets[1]),
- (horiz ? zero + len * offsets[1] : xy));
- if (cur == major && cur != 0) {
- this._wrapper.text(gt, (horiz ? xy : zero - size),
- (horiz ? zero - size : xy), '' + cur);
+ this._wrapper.line(gl, (horiz ? xy : zero + len * offsets[0]), (horiz ? zero + len * offsets[0] : xy),
+ (horiz ? xy : zero + len * offsets[1]), (horiz ? zero + len * offsets[1] : xy));
+ if (cur === major && cur !== 0) {
+ this._wrapper.text(gt, (horiz ? xy : zero - size), (horiz ? zero - size : xy), '' + cur);
}
- major += (cur == major ? axis._ticks.major : 0);
- minor += (cur == minor ? axis._ticks.minor : 0);
+ major += (cur === major ? axis._ticks.major : 0);
+ minor += (cur === minor ? axis._ticks.minor : 0);
}
}
if (axis._title) {
@@ -375,14 +374,16 @@ $.extend(SVGPlot.prototype, {
zero, axis._title, $.extend({textAnchor: 'end'}, axis._titleFormat || {}));
}
else {
- this._wrapper.text(this._plotCont, zero,
- dims[this.Y] + dims[this.H] + axis._titleOffset,
+ this._wrapper.text(this._plotCont, zero, dims[this.Y] + dims[this.H] + axis._titleOffset,
axis._title, $.extend({textAnchor : 'middle'}, axis._titleFormat || {}));
}
}
},
- /* Plot an individual function. */
+ /** Plot an individual function.
+ @private
+ @param fn {function} The function to plot.
+ @param cur {number} The current function index. */
_plotFunction: function(fn, cur) {
var dims = this._getDims();
var scales = this._getScales();
@@ -403,27 +404,27 @@ $.extend(SVGPlot.prototype, {
path[(first ? 'move' : 'line') + 'To'](px, py);
first = false;
}
- var p = this._wrapper.path(this._plot, path,
- $.extend({class_: 'fn' + cur, fill: 'none', stroke: fn._stroke,
+ var p = this._wrapper.path(this._plot, path, $.extend({class_: 'fn' + cur, fill: 'none', stroke: fn._stroke,
strokeWidth: fn._strokeWidth}, fn._settings || {}));
this._showStatus(p, fn._name);
},
- /* Draw the plot title - centred. */
+ /** Draw the plot title - centred
+ @private */
_drawTitle: function() {
this._wrapper.text(this._plotCont, this._getValue(this._plotCont, 'width') / 2,
this._title.offset, this._title.value, this._title.settings);
},
- /* Draw the chart legend. */
+ /** Draw the chart legend.
+ @private */
_drawLegend: function() {
if (!this.legend._show) {
return;
}
var g = this._wrapper.group(this._plotCont, {class_: 'legend'});
var dims = this._getDims(this.legend._area);
- this._wrapper.rect(g, dims[this.X], dims[this.Y], dims[this.W], dims[this.H],
- this.legend._bgSettings);
+ this._wrapper.rect(g, dims[this.X], dims[this.Y], dims[this.W], dims[this.H], this.legend._bgSettings);
var horiz = dims[this.W] > dims[this.H];
var numFn = this._functions.length;
var offset = (horiz ? dims[this.W] : dims[this.H]) / numFn;
@@ -439,7 +440,10 @@ $.extend(SVGPlot.prototype, {
}
},
- /* Show the current value status on hover. */
+ /** Show the current value status on hover.
+ @private
+ @param elem {SVGElement} The current plot element.
+ @param label {string} The current status label. */
_showStatus: function(elem, label) {
var status = this._onstatus;
if (this._onstatus) {
@@ -449,18 +453,22 @@ $.extend(SVGPlot.prototype, {
}
});
-/* Details about each plot function.
- @param plot (SVGPlot) the owning plot
- @param name (string) the name of this function (optional)
- @param fn (function) the function to be plotted
- @param range (number[2]) the range of values to be plotted (optional)
- @param points (number) the number of points to plot within this range (optional)
- @param stroke (string) the colour of the (out)line for the plot (optional)
- @param strokeWidth (number) the width of the (out)line for the plot (optional)
- @param settings (object) additional formatting settings (optional)
- @return (SVGPlotFunction) the new plot function object */
+/** A plot function definition.
+ @module SVGPlotFunction */
+
+/** Details about each plot function.
+ Created through plot.addFunction().
Accessed through plot.xAxis or plot.yAxis.
Accessed through plot.legend.
true to display it, false to hide it.
+ @return {SVGPlotLegend|boolean} This legend object or show the legend? (if no parameters) */
show: function(show) {
- if (arguments.length == 0) {
+ if (arguments.length === 0) {
return this._show;
}
this._show = show;
@@ -761,35 +765,33 @@ $.extend(SVGPlotLegend.prototype, {
return this;
},
- /* Set or retrieve the legend area.
- @param left (number) > 1 is pixels, <= 1 is proportion of width or
- (number[4]) for left, top, right, bottom
- @param top (number) > 1 is pixels, <= 1 is proportion of height
- @param right (number) > 1 is pixels, <= 1 is proportion of width
- @param bottom (number) > 1 is pixels, <= 1 is proportion of height
- @return (SVGPlotLegend) this legend object or
- (number[4]) the legend area: left, top, right, bottom (if no parameters) */
+ /** Set or retrieve the legend area.
+ @param left {number|number[]} > 1 is pixels, <= 1 is proportion of width or array for left, top, right, bottom.
+ @param [top] {number} > 1 is pixels, <= 1 is proportion of height.
+ @param [right] {number} > 1 is pixels, <= 1 is proportion of width.
+ @param [bottom] {number} > 1 is pixels, <= 1 is proportion of height.
+ @return {SVGPlotLegend|number[]} This legend object or the legend area:
+ left, top, right, bottom (if no parameters). */
area: function(left, top, right, bottom) {
- if (arguments.length == 0) {
+ if (arguments.length === 0) {
return this._area;
}
- this._area = (isArray(left) ? left : [left, top, right, bottom]);
+ this._area = ($.isArray(left) ? left : [left, top, right, bottom]);
this._plot._drawPlot();
return this;
},
- /* Set or retrieve additional settings for the legend area.
- @param sampleSize (number) the size of the sample box to display (optional)
- @param bgSettings (object) additional formatting settings for the legend background
- @param textSettings (object) additional formatting settings for the legend text (optional)
- @return (SVGPlotLegend) this legend object or
- (object) bgSettings and textSettings for the legend (if no parameters) */
+ /** Set or retrieve additional settings for the legend area.
+ @param [sampleSize] {number} The size of the sample box to display.
+ @param bgSettings {object} Additional formatting settings for the legend background.
+ @param [textSettings] {object} Additional formatting settings for the legend text.
+ @return {SVGPlotLegend|object} This legend object or
+ bgSettings and textSettings for the legend (if no parameters). */
settings: function(sampleSize, bgSettings, textSettings) {
- if (arguments.length == 0) {
- return {sampleSize: this._sampleSize, bgSettings: this._bgSettings,
- textSettings: this._textSettings};
+ if (arguments.length === 0) {
+ return {sampleSize: this._sampleSize, bgSettings: this._bgSettings, textSettings: this._textSettings};
}
- if (typeof sampleSize == 'object') {
+ if (typeof sampleSize === 'object') {
textSettings = bgSettings;
bgSettings = sampleSize;
sampleSize = null;
@@ -801,17 +803,11 @@ $.extend(SVGPlotLegend.prototype, {
return this;
},
- /* Return to the parent plot. */
+ /** Return to the parent plot.
+ @return {SVGPlot} The parent plot. */
end: function() {
return this._plot;
}
});
-//==============================================================================
-
-/* Determine whether an object is an array. */
-function isArray(a) {
- return (a && a.constructor == Array);
-}
-
})(jQuery)
diff --git a/jquery.svgplot.min.js b/jquery.svgplot.min.js
index 78d9f39..dc47017 100644
--- a/jquery.svgplot.min.js
+++ b/jquery.svgplot.min.js
@@ -1,7 +1,6 @@
-/* http://keith-wood.name/svg.html
- SVG plotting extension for jQuery v1.4.5.
+/* http://keith-wood.name/svg.html
+ SVG plotting extension for jQuery v1.5.0.
Written by Keith Wood (kbwood{at}iinet.com.au) December 2008.
- Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and
- MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses.
+ Available under the MIT (http://keith-wood.name/licence.html) license.
Please attribute the author if you use it. */
-(function($){$.svg.addExtension('plot',SVGPlot);function SVGPlot(a){this._wrapper=a;this._drawNow=false;this._title={value:'',offset:25,settings:{textAnchor:'middle'}};this._area=[0.1,0.1,0.8,0.9];this._areaFormat={fill:'none',stroke:'black'};this._gridlines=[];this._equalXY=true;this._functions=[];this._onstatus=null;this._uuid=new Date().getTime();this._plotCont=this._wrapper.svg(0,0,0,0,{class_:'svg-plot'});this.xAxis=new SVGPlotAxis(this);this.xAxis.title('X',20);this.yAxis=new SVGPlotAxis(this);this.yAxis.title('Y',20);this.legend=new SVGPlotLegend(this);this._drawNow=true}$.extend(SVGPlot.prototype,{X:0,Y:1,W:2,H:3,L:0,T:1,R:2,B:3,container:function(a){if(arguments.length==0){return this._plotCont}this._plotCont=a;return this},area:function(a,b,c,d){if(arguments.length==0){return this._area}this._area=(isArray(a)?a:[a,b,c,d]);this._drawPlot();return this},format:function(a,b,c){if(arguments.length==0){return this._areaFormat}if(typeof b=='object'){c=b;b=null}this._areaFormat=$.extend({fill:a},(b?{stroke:b}:{}),c||{});this._drawPlot();return this},gridlines:function(a,b){if(arguments.length==0){return this._gridlines}this._gridlines=[(typeof a=='string'?{stroke:a}:a),(typeof b=='string'?{stroke:b}:b)];if(this._gridlines[0]==null&&this._gridlines[1]==null){this._gridlines=[]}this._drawPlot();return this},equalXY:function(a){if(arguments.length==0){return this._equalXY}this._equalXY=a;return this},title:function(a,b,c,d){if(arguments.length==0){return this._title}if(typeof b!='number'){d=c;c=b;b=null}if(typeof c!='string'){d=c;c=null}this._title={value:a,offset:b||this._title.offset,settings:$.extend({textAnchor:'middle'},(c?{fill:c}:{}),d||{})};this._drawPlot();return this},addFunction:function(a,b,c,d,e,f,g){this._functions.push(new SVGPlotFunction(this,a,b,c,d,e,f,g));this._drawPlot();return this},functions:function(i){return(arguments.length>0?this._functions[i]:null)||this._functions},noDraw:function(){this._drawNow=false;return this},redraw:function(){this._drawNow=true;this._drawPlot();return this},status:function(a){this._onstatus=a;return this},_drawPlot:function(){if(!this._drawNow){return}while(this._plotCont.firstChild){this._plotCont.removeChild(this._plotCont.firstChild)}if(!this._plotCont.parent){this._wrapper._svg.appendChild(this._plotCont)}if(!this._plotCont.width){this._plotCont.setAttribute('width',parseInt(this._plotCont.getAttribute('width'),10)||this._wrapper._width())}else if(this._plotCont.width.baseVal){this._plotCont.width.baseVal.value=this._plotCont.width.baseVal.value||this._wrapper._width()}else{this._plotCont.width=this._plotCont.width||this._wrapper._width()}if(!this._plotCont.height){this._plotCont.setAttribute('height',parseInt(this._plotCont.getAttribute('height'),10)||this._wrapper._height())}else if(this._plotCont.height.baseVal){this._plotCont.height.baseVal.value=this._plotCont.height.baseVal.value||this._wrapper._height()}else{this._plotCont.height=this._plotCont.height||this._wrapper._height()}this._drawChartBackground();var a=this._getDims();var b=this._wrapper.other(this._plotCont,'clipPath',{id:'clip'+this._uuid});this._wrapper.rect(b,a[this.X],a[this.Y],a[this.W],a[this.H]);this._plot=this._wrapper.group(this._plotCont,{class_:'foreground',clipPath:'url(#clip'+this._uuid+')'});this._drawAxis(true);this._drawAxis(false);for(var i=0;i