g2.ext.js #

See the API Reference

g2 extension for expanded functionality #

g2.ext adds properties that can be used on standard g2 elements, which is used in extensions like label and mark, as well as in other extensions like g2.mec.js.

get the length of a line in label #

    g2().view({cartesian:true})
        .lin({x1:10,y1:10,x2:90,y2:90,ld:[6,3], label:`@len`})

How label works is shown further below on this page.

Splines #

g2.ext.js introduces a new method that draws splines by points by implementing a centripetal Catmull-Rom spline (thus avoiding cusps and self-intersections).

The spline command expects an object with a pts property analogous to the ply method from g2.js. This property can have different formats, for each of which there must be provided an individual array iterator. g2 implements three standard iterators which need not be specified by the last itr argument.

Another property of string is closed which can have boolean values true and false, which are interpreted as closed flags (also analogous to ply).

g2().style({ls:"red",lw:3,fs:"#ddd"})
    .spline([10,10,40,70,60,30,90,80])
    .spline([[110,10],[140,70],[160,30],[190,80]],true)
    .spline([{x:210,y:10},{x:240,y:70},{x:260,y:30},{x:290,y:80}],'split');

Other resources on splines:

• cubic hermite spline
• bézier curves

Labels #

If you want to add text to a geometric element, you can always use the basic txt element. However, some element types support the smarter label property, which comes with a more intuitive relative positioning concerning its nearest previous element. Reliable positioning always requires cartesian coordinates.

Please note that with g2 version 3 labels as element have been deprecated in favor of usage as property.

Point-like and rectangular elements provide locations according to cardinal directions.Linear elements provide parameterized numerical or named locations.

Type	Elements	default	locations	offset	img
Point elements	cir, use	c	c e,ne,n,nw,w,sw,s,se angle in [radians]	number
Rectangular elements	rec, slider	c	c e,ne,n,nw,w,sw,s,se	number
Linear elements	lin, vec, dim arc, adim spring, damper bar, bar2	0.5	beg, mid, end normalized numerical parameter	left, right number
Polygonial elements	ply, ground link, link2	0.5	beg, end #index normalized numerical parameter	left, right number
Spline element	spline	beg	beg, end #index	left, right number

A numerical offset always means outside of closed shapes with regard to the specified point. With linear, polygonial and spline elements a positive value means right of and a negativ value means left of the line at the specified point. If there is no offset distance specified, the global g2.State.labelOffset's value is taken. Please note, that cardinal locations are not sensitive to transformations.

Markers #

Markers can be placed onto the outline of an element.

Please note that with g2 version 3 marks as element have been deprecated in favor of usage as property.

Elements with a unique center and rectangular elements provide locations according to the cardinal directions. Linear elements provide parameterized numerical or named locations. The spline element only supports indexed locations. It does not support parameterized locations.

Locations can also be passed as arrays, which makes it convenient for multiple marks with the same mark to be just passed in one calling of the mark method e.g mark({mark:"tick",loc:[0,0.25,"mid",0.9]})

Default symbols are "tick", "sqr" and "dot".

Type	Elements	default	locations	dir	img
Centered elements	cir	c	c e,ne,n,nw,w,sw,s,se normalized parameter	-1,0,1
Rectangular elements	rec, slider	c	c e,ne,n,nw,w,sw,s,se	-1,0,1
Linear elements	lin, vec, dim arc, avec, adim spring, damper bar, bar2	0.5	beg, mid, end normalized numerical parameter	-1,0,1
Polygonial elements	ply, ground link, link2	0.5	beg, end, mid, all #index normalized numerical parameter	-1,0,1
Spline element	spline	beg	beg, end, mid, all #index	-1,0,1

Symbols #

These symbols expect cartesian mode to be true, notable when using nodfix, nodflt and origin.

Some useful symbols implemented into g2.ext.js are:

Element	Image	Meaning
pol({x,y})		Creates a pol symbol.
gnd({x,y})		Creates a gnd symbol.
nod({x,y})		Creates a nod symbol.
dblnod({x,y})		Creates a dblnod symbol.
nodfix({x,y})		Creates a nodfix symbol.
nodflt({x,y})		Creates a nodflt symbol.
origin({x,y})		Creates a origin symbol.

Helpful elements #

g2.ext.js also provides some extra elements that are based on core elements:

Element	Image	Meaning
vec({x1,y1,x2,y2})		Linear vector element which starts at x1, y1 and points to x2, y2.
avec({x,y,r,w,dw})		Angular vector element with center at x, y, radius r and spans a vectro from w to w+dw.
dim({x1,y1,x2,y2,inside})		Linear dimension element which starts at x1, y1 and points to x2, y2.
adim({x,y,r,w,dw,inside})		Arc dimension element by center coordinates x, y, radius r, start angle w and angular range dw.

Styles #

There are some predefined colors, line styles and other constants. They can be overwritten if needed.