svg.js

ntop网络监控软件,使用方面

                        fontFamily: "Arial",
                        fontSize: this.options.axisLabelFontSize + "px",
                        fill: this.options.axisLabelColor.toRGBString()
                    };
                    
                    /* we can do clipping just like DIVs
                    http://www.xml.com/pub/a/2004/06/02/svgtype.html */
                    /*
                    var mask = this.createSVGElement("mask", {id: "mask" + tick[0]});
                    var maskShape = this.createSVGElement("rect",
                        {y: y + 3,
                         x: (x - this.options.padding.left + 3),
                         width: (this.options.padding.left - this.options.axisTickSize) + "px",
                         height: (this.options.axisLabelFontSize + 3) + "px",
                         style: {"fill": "#ffffff", "stroke": "#000000"}});
                    mask.appendChild(maskShape);
                    this.defs.appendChild(mask);
                    
                    attrs["filter"] = "url(#mask" + tick[0] + ")";
                    */
                    
                    var label = this.createSVGElement("text", attrs);
                    label.appendChild(this.document.createTextNode(tick[1]));
                    this.root.appendChild(label);
                }
            };
            
            MochiKit.Iter.forEach(this.layout.yticks, bind(drawTick, this));
        }

        this._drawLine(this.area.x, this.area.y, this.area.x, this.area.y + this.area.h, lineAttrs);
    }

    if (this.options.drawXAxis) {
        if (this.layout.xticks) {
            var drawTick = function(tick) {
                var x = this.area.x + tick[0] * this.area.w;
                var y = this.area.y + this.area.h;
                this._drawLine(x, y, x, y + this.options.axisTickSize, lineAttrs);

                if (this.options.axisLabelUseDiv) {
                    var label = DIV(labelStyle, tick[1]);
                    label.style.top = (y + this.options.axisTickSize) + "px";
                    label.style.left = (x - this.options.axisLabelWidth/2) + "px";
                    label.style.textAlign = "center";
                    label.style.width = this.options.axisLabelWidth + "px";
                    MochiKit.DOM.appendChildNodes(this.container, label);
                    this.xlabels.push(label);
                }
                else {
                    var attrs = {
                        y: (y + this.options.axisTickSize + this.options.axisLabelFontSize),
                        x: x - 3,
                        width: this.options.axisLabelWidth + "px",
                        height: (this.options.axisLabelFontSize + 3) + "px",
                        fontFamily: "Arial",
                        fontSize: this.options.axisLabelFontSize + "px",
                        fill: this.options.axisLabelColor.toRGBString(),
                        textAnchor: "middle"
                    };
                    var label = this.createSVGElement("text", attrs);
                    label.appendChild(this.document.createTextNode(tick[1]));
                    this.root.appendChild(label);
                }
            };
            
            MochiKit.Iter.forEach(this.layout.xticks, bind(drawTick, this));
        }

        this._drawLine(this.area.x, this.area.y + this.area.h, this.area.x + this.area.w, this.area.y + this.area.h, lineAttrs)
    }
};

PlotKit.SVGRenderer.prototype._renderPieAxis = function() {

    if (this.layout.xticks) {
        // make a lookup dict for x->slice values
        var lookup = new Array();
        for (var i = 0; i < this.layout.slices.length; i++) {
            lookup[this.layout.slices[i].xval] = this.layout.slices[i];
        }
        
        var centerx = this.area.x + this.area.w * 0.5;
        var centery = this.area.y + this.area.h * 0.5;
        var radius = Math.min(this.area.w * this.options.pieRadius + 10, 
                              this.area.h * this.options.pieRadius + 10);
        var labelWidth = this.options.axisLabelWidth;
        
        for (var i = 0; i < this.layout.xticks.length; i++) {
            var slice = lookup[this.layout.xticks[i][0]];
            if (MochiKit.Base.isUndefinedOrNull(slice))
                continue;
                
                
            var angle = (slice.startAngle + slice.endAngle)/2;
            // normalize the angle
            var normalisedAngle = angle;
            if (normalisedAngle > Math.PI * 2)
                normalisedAngle = normalisedAngle - Math.PI * 2;
            else if (normalisedAngle < 0)
                normalisedAngle = normalisedAngle + Math.PI * 2;
                
            var labelx = centerx + Math.sin(normalisedAngle) * (radius + 10);
            var labely = centery - Math.cos(normalisedAngle) * (radius + 10);

            var attrib = {
                "position": "absolute",
                 "zIndex": 11,
                "width": labelWidth + "px",
                "fontSize": this.options.axisLabelFontSize + "px",
                "overflow": "hidden",
                "color": this.options.axisLabelColor.toHexString()
            };

            var svgattrib = {
                "width": labelWidth + "px",
                "fontSize": this.options.axisLabelFontSize + "px",
                "height": (this.options.axisLabelFontSize + 3) + "px",
                "fill": this.options.axisLabelColor.toRGBString()
            };

            if (normalisedAngle <= Math.PI * 0.5) {
                // text on top and align left
                MochiKit.Base.update(attrib, {
                    'textAlign': 'left', 'verticalAlign': 'top',
                    'left': labelx + 'px',
                    'top':  (labely - this.options.axisLabelFontSize) + "px"
                });
                MochiKit.Base.update(svgattrib, {
                    "x": labelx,
                    "y" :(labely - this.options.axisLabelFontSize),
                    "textAnchor": "left"
                        });
            }
            else if ((normalisedAngle > Math.PI * 0.5) && (normalisedAngle <= Math.PI)) {
                // text on bottom and align left
                MochiKit.Base.update(attrib, {
                    'textAlign': 'left', 'verticalAlign': 'bottom',
                    'left': labelx + 'px',
                    'top':  labely + "px"
                });
                MochiKit.Base.update(svgattrib, {
                    'textAnchor': 'left',
                    'x': labelx,
                    'y':  labely
                });
            }
            else if ((normalisedAngle > Math.PI) && (normalisedAngle <= Math.PI*1.5)) {
                // text on bottom and align right
                MochiKit.Base.update(attrib, {
                    'textAlign': 'right', 'verticalAlign': 'bottom',
                    'left': labelx + 'px',
                    'top':  labely + "px"
                });
                MochiKit.Base.update(svgattrib, {
                    'textAnchor': 'right',
                    'x': labelx - labelWidth,
                    'y':  labely
                });
            }
            else {
                // text on top and align right
                MochiKit.Base.update(attrib, {
                    'textAlign': 'left', 'verticalAlign': 'bottom',
                    'left': labelx + 'px',
                    'top':  labely + "px"
                });
                MochiKit.Base.update(svgattrib, {
                    'textAnchor': 'left',
                    'x': labelx - labelWidth,
                    'y':  labely - this.options.axisLabelFontSize
                });
            }

            if (this.options.axisLabelUseDiv) {
                var label = DIV({'style': attrib}, this.layout.xticks[i][1]);
                this.xlabels.push(label);
                MochiKit.DOM.appendChildNodes(this.container, label);
            }
            else {
                var label = this.createSVGElement("text", svgattrib);
                label.appendChild(this.document.createTextNode(this.layout.xticks[i][1]))
                this.root.appendChild(label);
            }
      }
        
    }
};

PlotKit.SVGRenderer.prototype._renderBackground = function() {
    var opts = {"stroke": "none",
                  "fill": this.options.backgroundColor.toRGBString()
    };
    this._drawRect(0, 0, this.width, this.height, opts);
};

PlotKit.SVGRenderer.prototype._drawRect = function(x, y, w, h, moreattrs) {
    var attrs = {x: x + "px", y: y + "px", width: w + "px", height: h + "px"};
    if (moreattrs)
        MochiKit.Base.update(attrs, moreattrs);

    var elem = this.createSVGElement("rect", attrs);
    this.root.appendChild(elem);
};

PlotKit.SVGRenderer.prototype._drawLine = function(x1, y1, x2, y2, moreattrs) {
    var attrs = {x1: x1 + "px", y1: y1 + "px", x2: x2 + "px", y2: y2 + "px"};
    if (moreattrs)
        MochiKit.Base.update(attrs, moreattrs);

    var elem = this.createSVGElement("line", attrs);
    this.root.appendChild(elem);
}

PlotKit.SVGRenderer.prototype.clear = function() {
    while(this.element.firstChild) {
        this.element.removeChild(this.element.firstChild);
    }
    
    if (this.options.axisLabelUseDiv) {
        for (var i = 0; i < this.xlabels.length; i++) {
            MochiKit.DOM.removeElement(this.xlabels[i]);
        }        
        for (var i = 0; i < this.ylabels.length; i++) {
            MochiKit.DOM.removeElement(this.ylabels[i]);
        }            
    }
    this.xlabels = new Array();
    this.ylabels = new Array();
};


PlotKit.SVGRenderer.prototype.createSVGElement = function(name, attrs) {
    var isNil = MochiKit.Base.isUndefinedOrNull;
    var elem;
    var doc = isNil(this.document) ? document : this.document;

    try {
        elem = doc.createElementNS(PlotKit.SVGRenderer.SVGNS, name);
    }
    catch (e) {
        elem = doc.createElement(name);
        elem.setAttribute("xmlns", PlotKit.SVGRenderer.SVGNS);
    }

    if (attrs)
        MochiKit.DOM.updateNodeAttributes(elem, attrs);

    // TODO: we don't completely emulate the MochiKit.DOM.createElement
    //       as we don't care about nodes contained. We really should though.

    return elem;

};


PlotKit.SVGRenderer.SVG = function(attrs) {
    // we have to do things differently for IE+AdobeSVG.
    // My guess this works (via trial and error) is that we need to
    // have an SVG object in order to use SVGDocument.createElementNS
    // but IE doesn't allow us to that.

    var ie = navigator.appVersion.match(/MSIE (\d\.\d)/);
    var opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
    if (ie && (ie[1] >= 6) && (!opera)) {
        var width = attrs["width"] ? attrs["width"] : "100";
        var height = attrs["height"] ? attrs["height"] : "100";
        var eid = attrs["id"] ? attrs["id"] : "notunique";
        
        var html = '<svg:svg width="' + width + '" height="' + height + '" ';
        html += 'id="' + eid + '" version="1.1" baseProfile="full" />';

        var canvas = document.createElement(html);

        // create embedded SVG inside SVG.
        var group = canvas.getSVGDocument().createElementNS(PlotKit.SVGRenderer.SVGNS, "svg");
        group.setAttribute("width", width);
        group.setAttribute("height", height);
        canvas.getSVGDocument().appendChild(group);

        return canvas;
    }
    else {
        return PlotKit.SVGRenderer.prototype.createSVGElement("svg", attrs);
    }
};

PlotKit.SVGRenderer.isSupported = function() {
    var isOpera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
    var ieVersion = navigator.appVersion.match(/MSIE (\d\.\d)/);
    var safariVersion = navigator.userAgent.match(/AppleWebKit\/(\d+)/);
    var operaVersion = navigator.userAgent.match(/Opera\/(\d*\.\d*)/);
    var mozillaVersion = navigator.userAgent.match(/rv:(\d*\.\d*).*Gecko/);
    var svgFeature = "http://www.w3.org/TR/SVG11/feature#SVG";

    if (ieVersion && (ieVersion[1] >= 6) && !isOpera) {
        return document.implementation.hasFeature(svgFeature,"1.1");
        /*
        var dummysvg = document.createElement('<svg:svg width="1" height="1" baseProfile="full" version="1.1" id="dummy">');
        try {
            dummysvg.getSVGDocument();
            dummysvg = null;
            return true;
        }
        catch (e) {
            return false;
        }
        */
        
    }
    
    /* support not really there yet. no text and paths are buggy
    if (safariVersion && (safariVersion[1] > 419))
        return true;
    */

    if (operaVersion && (operaVersion[1] > 8.9))
        return true
    
    if (mozillaVersion && (mozillaVersion > 1.7))
        return true;
    
    return false;
};

// Namespace Iniitialisation

PlotKit.SVG = {}
PlotKit.SVG.SVGRenderer = PlotKit.SVGRenderer;

PlotKit.SVG.EXPORT = [
    "SVGRenderer"
];

PlotKit.SVG.EXPORT_OK = [
    "SVGRenderer"
];

PlotKit.SVG.__new__ = function() {
    var m = MochiKit.Base;
    
    m.nameFunctions(this);
    
    this.EXPORT_TAGS = {
        ":common": this.EXPORT,
        ":all": m.concat(this.EXPORT, this.EXPORT_OK)
    };
};

PlotKit.SVG.__new__();
MochiKit.Base._exportSymbols(this, PlotKit.SVG);