Section
The Section
is one of the cornerstones of florence
. It is used to:
- define local coordinate systems
- apply coordinate transformations
- specify zooming and panning behavior
- enable interactions
<script>
import { Graphic, Section } from '@snlab/florence'
</script>
<Graphic width={200} height={200} backgroundColor={'blue'}>
<Section
x1={0.25}
x2={0.75}
y1={0.25}
y2={0.75}
backgroundColor={'green'}
>
</Section>
</Graphic>
Section
s can be nested, but a Section
with a coordinate transformation (e.g. polar) can only contain Mark
s and Layer
s
Properties
Positioning
Prop | Required | Types | Default | Unit(s) |
---|---|---|---|---|
x1 | false |
Number , String , Date , Function |
undefined |
Local coordinate |
x2 | false |
Number , String , Date , Function |
undefined |
Local coordinate |
y1 | false |
Number , String , Date , Function |
undefined |
Local coordinate |
y2 | false |
Number , String , Date , Function |
undefined |
Local coordinate |
It is possible to use the Section
without providing any of the positioning props. This will result in the Section
inheriting the extents of the parent Section
or Graphic
, taking padding into account. For example,
<Graphic width={500} height={500}>
<Section padding={50}>
<Section>
...
</Section>
</Section>
</Graphic>
is equivalent to
<Graphic width={500} height={500}>
<Section
x1={0}
x2={1}
y1={0}
y2={1}
>
<Section
x1={0.1}
x2={0.9}
y1={0.1}
y2={0.9}
>
...
</Section>
</Section>
</Graphic>
In the examples above, no scales are being used, so everything is measured in relative coordinates (see local coordinates docs for more information). However, if the parent Graphic
or Section
has defined scaleX
and scaleY
props,
the positioning props of the child section have to be defined in local coordinates. For example:
<Graphic
width={500}
height={500}
scaleX={scaleLinear().domain([0, 10])}
scaleY={scaleLinear().domain([0, 10])}
>
<Section
x1={1} x2={9}
y1={1} y2={9}
>
...
</Section>
</Graphic>
would be equivalent to:
<Graphic
width={500}
height={500}
>
<Section
x1={0.1} x2={0.9}
y1={0.1} y2={0.9}
>
...
</Section>
</Graphic>
Aesthetics
Prop | Required | Type(s) | Default | Units |
---|---|---|---|---|
backgroundColor | false |
String |
undefined |
Named, hex, rgb or hsl color |
Local coordinate system
Prop | Required | Type(s) | Default | Unit(s) |
---|---|---|---|---|
scaleX | false |
Function |
undefined |
d3 scale |
scaleY | false |
Function |
undefined |
d3 scale |
coordinates | false |
CoordinateTransformation |
cartesian() |
- |
flipX | false |
Boolean |
false |
- |
flipY | false |
Boolean |
false |
- |
padding | false |
Number , Object |
undefined |
Pixel |
zoomIdentity | false |
Object |
undefined |
- |
For more how to use these props, see the local coordinates documentation.
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) |
---|---|---|---|---|
clip | false |
String |
'padding' |
Either 'padding' or 'outer' |
clip
controls how the marks, layers and other visual elements inside of this Section
should be clipped off. To clip off everything within the padding, 'padding'
should be used. To only clip off everything outside of the Sections
’s outer border (determined by the positioning props), 'outer'
should be used.
Methods
selectRectangle
updateSelectRectangle
resetSelectRectangle
startSelectPolygon
addPointToSelectPolygon
moveSelectPolygon
resetSelectPolygon
Section
methods can be used as follows:
<script>
let section
section.selectRectangle(...)
</script>
<Section bind:this={section}>
</Section>
For more information on Section
methods and how to use them to create advanced interactions like selection or brushing, check out the interactivity documentation.