FuncLine
The FuncLine
mark can be used to plot functions over intervals. It is the only mark that does not have a corresponding layer element.
<script>
import { Graphic, FuncLine, XAxis, YAxis } from '@snlab/florence'
</script>
<Graphic
width={200}
height={200}
scaleX={[0, 10]}
scaleY={[0, 10]}
padding={20}
flipY
>
<FuncLine func={x => Math.exp(x / 4)} stroke={'red'} />
<XAxis />
<YAxis />
</Graphic>
Properties
Positioning
Prop | Required | Type(s) | Default | Unit(s) |
---|---|---|---|---|
func | true |
Function |
undefined |
- |
x | false |
Number[] |
undefined |
Local coordinate |
resolution | false |
Number |
3 |
Pixel |
To render FuncLine
, a Function
that maps a numeric input to a numeric output has to be passed to the func
prop. By default, this function will be plotted over a domain that is inherited from the parent Graphic
or Section
. To provide a different custom domain, the x
prop can be passed an Array
containing two numbers. For example:
<script>
import { Graphic, FuncLine, XAxis, YAxis } from '@snlab/florence'
const pi = Math.PI
</script>
<Graphic
width={200}
height={200}
scaleX={[-2 * pi, 2 * pi]}
scaleY={[-2, 2]}
padding={20}
>
<FuncLine func={Math.sin} x={[-pi, pi]} />
<XAxis />
<YAxis />
</Graphic>
The resolution
prop controls the resolution of the interpolated line. Lower means more smooth lines, but slower performance.
The FuncLine
only works if its parent Graphic
or Section
’s scales have quantitative domains.
Aesthetics
Prop | Required | Type(s) | Default | Unit(s) |
---|---|---|---|---|
stroke | false |
String |
'#000000' |
Named, hex, rgb or hsl color |
strokeWidth | false |
Number |
3 |
Pixel |
opacity | false |
Number |
1 |
Number between 0 and 1 |
lineCap | false |
String |
'butt' |
'butt' , 'round' or 'square' |
lineJoin | false |
String |
'bevel' |
'bevel' , 'round' or 'miter' |
miterLimit | false |
Number |
10 |
Pixel |
dashArray | false |
String |
undefined |
A string of numbers seperated by spaces. See here |
dashOffset | false |
Number |
undefined |
Pixel |
These aesthetic props are similar to attributes of the SVG line element. The analogous line
attributes are shown below in brackets:
stroke
refers to the color of the linestrokeWidth
refers to the width of the linestrokeOpacity
refers to the transparency of the line,0
being fully transparentlineCap
controls the endings of the line (stroke-linecap
)lineJoin
controls the shape to be used at the corners of the line (stroke-linejoin
)miterLimit
, iflineJoin
is'miter'
, sets a limit on how long the miter can be (stroke-miterlimit
)dashArray
can be used to make dashed lines (stroke-dasharray
)dashOffset
shifts the pattern defined indashArray
by a number of pixels (stroke-dashoffset
)
Interactions
Mouse events
Prop | Required | Type(s) | Default | Unit(s) |
---|---|---|---|---|
onClick | false |
Function |
undefined |
- |
onMousedown | false |
Function |
undefined |
- |
onMouseup | false |
Function |
undefined |
- |
onMouseover | false |
Function |
undefined |
- |
onMouseout | false |
Function |
undefined |
- |
onMousedrag | false |
Function |
undefined |
- |
Touch events
Prop | Required | Type(s) | Default | Unit(s) |
---|---|---|---|---|
onTouchdown | false |
Function |
undefined |
- |
onTouchup | false |
Function |
undefined |
- |
onTouchover | false |
Function |
undefined |
- |
onTouchout | false |
Function |
undefined |
- |
onTouchdrag | false |
Function |
undefined |
- |
Select events
Prop | Required | Type(s) | Default | Unit(s) |
---|---|---|---|---|
onSelect | false |
Function |
undefined |
- |
onDeselect | false |
Function |
undefined |
- |
See the interactivity documentation for more information.
Other
Prop | Required | Type(s) | Default | Unit(s) |
---|---|---|---|---|
outputSettings | false |
Object |
undefined |
- |
blockReindexing | false |
Boolean |
false |
- |
clip | false |
String , undefined |
undefined |
Either 'padding' , 'outer' or undefined |
outputSettings
: see the advanced rendering documentation for more information.blockReindexing
: see the interactivity documentation for more information.clip
: if defined, overrides the clip mode of the parentGraphic
,Section
orGlyph
.
Examples
The FuncLine
is not featured in any examples yet!