Have questions? Stuck? Please check our FAQ for some common questions and answers.

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

NameSummary
createDragBehaviorCreates drag behavior for SVG nodes on the Topology View.
loadGlowDefsCreates the SVG glow effect for links on the Topology View.
cat7Returns an API to get the theme colors for the Topology View.
translateReturns a string representing translation in SVG transform attribute syntax.
scaleReturns a string representing scaling in SVG transform attribute syntax.
skewXReturns a string representing skewing in the X direction in SVG transform attribute syntax.
rotateReturns a string representing rotation in SVG transform attribute syntax.
stripPxReturns the string given but without 'px' on the end.
safeIdReturns a safe ID for nodes to use on the Topology View.
visibleToggle an element's visibility or query an element's visibility.

Function Descriptions

createDragBehavior

Creates drag behavior for SVG nodes on the Topology View.

Example UsageArgumentsReturn Value
sus.createDragBehavior(force, selectCb, atDragEnd, dragEnabled, clickEnabled);

force - Topology View force layout object

selectCb - function reference to be executed at the end of the drag if click is enabled

atDragEnd - function reference to be executed on the end of the drag if drag is enabled

dragEnabled - function reference that returns a boolean of whether drag is enabled

clickEnabled - function reference that returns a boolean of whether click is enabled

d3 drag behavior object

loadGlowDefs

Creates the SVG glow effect for links on the Topology View.

Example UsageArgumentsReturn Value
sus.loadGlowDefs(defs);defs - d3 selection of the <defs> element of an SVGnone, but defines a glow effect for links

 cat7

Returns an API to get the theme colors for the Topology View.

Example UsageArgumentsReturn Value
var cat7 = sus.cat7();nonean object that contains an API, see below
Returned API Example UsageArgumentsReturn Value
cat7.testCard(svg);svg - d3 selection of an SVG elementnone, but creates a circle, rectangle, and text in a specific color scheme for color testing
cat7.getColor(id, muted, theme);

id - string of the ID the device master or ONOS instance

muted - truthy or falsy value of whether the colors should be muted

theme - string of the name of the current theme

d3 scale ordinal range for the chosen theme

translate

Returns a string representing translation in SVG transform attribute syntax.

Example UsageArgumentsReturn Value
sus.translate(x, y);

x - String or number representing the x translation amount

or

An array of length 2 with x[0] as the x translation amount and x[1] as the y translation amount

y - String or number representing the y translation amount

or

undefined

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 UsageArgumentsReturn Value
sus.scale(x, y);

x - String or number representing the x scale translation amount

y - String or number representing the y scale translation amount

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 UsageArgumentsReturn 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 UsageArgumentsReturn 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 UsageArgumentsReturn 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 UsageArgumentsReturn 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: /[^a-z0-9]/gi

visible

Toggle an element's visibility or query an element's visibility.

This function is both setter and getter.

Example UsageArgumentsReturn Value
sus.isVisible(el, b);

el - d3 selection of an element

b - (optional) boolean of whether element should be visible or hidden

if b was undefined, will return boolean of el's 'visibility' style equaling 'visible'

if b is truthy, el's visibility style will be 'visible' otherwise 'hidden'

  • No labels