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 Numbers, Strings or Dates, 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 Arrays of Arrays of Numbers, Strings and Dates, or Functions 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 line
strokeWidth refers to the width of the line
strokeOpacity refers to the transparency of the line, 0 being fully transparent
lineCap controls the endings of the line (stroke-linecap)
lineJoin controls the shape to be used at the corners of the line (stroke-linejoin)
miterLimit, if lineJoin 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 in dashArray 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 parent Graphic, Section or Glyph.

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: