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) |
`any[] | Function` | undefined |
y | if (geometry === undefined) |
`any[] | Function` | undefined |
geometry | if (x === undefined && y === undefined) |
GeoJSON LineString or MultiLineString feature | undefined |
Local coordinate |
curve | false |
D3ShapeCurve |
undefined |
A d3-shape curve |
x
and y
can be arrays of any type, depending on the scale used in the parent Graphic, Section or Glyph. geometry
accepts GeoJSON LineString and MultiLineString features only. Coordinates inside the GeoJSON geometry will be treated as local coordinates, and not as WGS84. Alternatively, for x
and y
, Function
s can be passed that must return Array
s of default coordinates– see the local coordinates documentation. When using the LineLayer
, the x
and y
props will be supplied as Array
s of Array
s, or Function
s that return Array
s of Array
s of default coordinates. Furthermore, the LineLayer
accepts an Array
of GeoJSON features instead of a single feature. See the marks versus layers documentation for more information.
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 |
`‘butt’ | ‘round’ | ‘square’` |
lineJoin | false |
`‘bevel’ | ‘round’ | ‘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 |
OutputSettings |
undefined |
- |
clip | false |
`‘padding’ | ‘outer’ | undefined` |
outputSettings
: see the advanced rendering 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: