Line
The Line
mark plots a line element by taking two or more x/y coordinate pairs. Use cases include line charts and network visualizations.
<script>
import { Graphic, Line, LineLayer, XAxis, YAxis } from '@snlab/florence'
</script>
<Graphic width={200} height={200} scaleX={[0, 10]} scaleY={[0, 10]} padding={20}>
<Line
x={[0, 2.5, 2.5]}
y={[0, 2.5, 0]}
stroke={'red'}
/>
<LineLayer
x={[[6, 4], [10, 7.5, 7.5]]}
y={[[4, 6], [10, 7.5, 10]]}
stroke={['blue', 'green']}
/>
<XAxis />
<YAxis />
</Graphic>
To render the Line mark, you will need to provide the x
and y
or the geometry
props. The two uses are mutually exclusive.
Properties
Positioning
Prop | Required | Type(s) | Default | Unit(s)(s) |
---|---|---|---|---|
x | if (geometry === undefined) |
Number[] , String[] , Date[] , Function |
undefined |
Local coordinate |
y | if (geometry === undefined) |
Number[] , String[] , Date[] , Function |
undefined |
Local coordinate |
geometry | if (x === undefined && y === undefined) |
Array of GeoJSON LineString or MultiLineString features | undefined |
Local coordinate |
curve | false |
Object |
undefined |
A d3-shape curve |
x
and y
have to be arrays of Number
s, String
s or Date
s, depending on the scale used in the parent Section. geometry
accepts arrays of GeoJSON LineString and MultiLineString objects only. For all positioning props, a function can be supplied that bypasses the scaling step- see the local coordinates documentation. When using the LineLayer
, all positioning props will be supplied as Array
s of Array
s of Number
s, String
s and Date
s, or Function
s that return scaled coordinates- see the marks versus layers documentation.
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
.
In addition, the LineLayer
has the following props:
Prop | Required | Type(s) | Default | Unit(s) |
---|---|---|---|---|
keys | false |
String[] |
undefined |
Array of unique keys |
asOnePath | false |
Boolean |
false |
- |
See the marks versus layers documentation for more information on how keys
and asOnePath
work.
Examples
The Line
and LineLayer
can be seen in action in the following examples: