SvgUtilService - SVG Utility Service
SvgUtilService is an Angular Factory in the SVG module with the name svgUtil.js
. It provides an API to manipulate SVG elements in Javascript. To use this API, see the documentation on injecting Angular services.
API Functions
Name | Summary |
---|---|
createDragBehavior | Creates drag behavior for SVG nodes on the Topology View. |
loadGlowDefs | Creates the SVG glow effect for links on the Topology View. |
cat7 | Returns an API to get the theme colors for the Topology View. |
translate | Returns a string representing translation in SVG transform attribute syntax. |
scale | Returns a string representing scaling in SVG transform attribute syntax. |
skewX | Returns a string representing skewing in the X direction in SVG transform attribute syntax. |
rotate | Returns a string representing rotation in SVG transform attribute syntax. |
stripPx | Returns the string given but without 'px' on the end. |
safeId | Returns a safe ID for nodes to use on the Topology View. |
visible | Toggle an element's visibility or query an element's visibility. |
Function Descriptions
createDragBehavior
Creates drag behavior for SVG nodes on the Topology View.
Example Usage | Arguments | Return Value |
---|---|---|
sus.createDragBehavior(force , selectCb , atDragEnd , dragEnabled , clickEnabled ); |
| d3 drag behavior object |
loadGlowDefs
Creates the SVG glow effect for links on the Topology View.
Example Usage | Arguments | Return Value |
---|---|---|
sus.loadGlowDefs(defs ); | defs - d3 selection of the <defs> element of an SVG | none, but defines a glow effect for links |
cat7
Returns an API to get the theme colors for the Topology View.
Example Usage | Arguments | Return Value |
---|---|---|
var cat7 = sus.cat7(); | none | an object that contains an API, see below |
Returned API Example Usage | Arguments | Return Value |
cat7.testCard(svg ); | svg - d3 selection of an SVG element | none, but creates a circle, rectangle, and text in a specific color scheme for color testing |
cat7.getColor(id , muted , theme ); |
| d3 scale ordinal range for the chosen theme |
translate
Returns a string representing translation in SVG transform attribute syntax.
Example Usage | Arguments | Return Value |
---|---|---|
sus.translate(x , y ); |
or An array of length 2 with x[0] as the x translation amount and x[1] as the y translation amount
or
| string representing the translation amount given that can be used in the SVG transform attribute Ex: 'translate(2,3)' |
scale
Returns a string representing scaling in SVG transform attribute syntax.
Example Usage | Arguments | Return Value |
---|---|---|
sus.scale(x , y ); |
| string representing the scale amount given that can be used in the SVG transform attribute Ex: 'scale(2,3)' |
skewX
Returns a string representing skewing in the X direction in SVG transform attribute syntax.
Example Usage | Arguments | Return Value |
---|---|---|
sus.skewX(x ); | x - String or number representing the skewX amount | string representing the skewX amount given that can be used in the SVG transform attribute Ex: 'skewX(2)' |
rotate
Returns a string representing rotation in SVG transform attribute syntax.
Example Usage | Arguments | Return Value |
---|---|---|
sus.rotate(deg ); | deg - String or number representing the rotation amount in degrees | string representing the rotate amount given that can be used in the SVG transform attribute Ex: 'rotate(90)' |
stripPx
Returns the string given but without 'px' on the end. Usually this is a measurement in pixels.
Example Usage | Arguments | Return Value |
---|---|---|
sus.stripPx(s ); | s - String ending with 'px' | s without 'px' at the end |
safeId
Returns a safe ID for nodes to use on the Topology View.
Example Usage | Arguments | Return Value |
---|---|---|
sus.safeId(s ); | s - string device or host ID | string of a safe attribute ID. Safe IDs take the original string and replace unsafe characters with a '-', using the regular expression: |
visible
Toggle an element's visibility or query an element's visibility.
This function is both setter and getter.
Example Usage | Arguments | Return Value |
---|---|---|
sus.isVisible(el , b ); |
| if if |