-
Notifications
You must be signed in to change notification settings - Fork 133
Axis
<Axis> provides convenient axes elements, such as tick values and tick lines, and also labels and interactivity, roughly following the API of d3-axis (though under the hood d3-axis isn't used). Most of the time axes are created from objects that are sent to the axes attribute of the XYFrame or the axis attribute of the ORFrame, in which case the object follows the structure of the component but doesn't have a reference to scale or size because that is passed from the frame and may have its orient overwritten if it's invalid (for ORFrames).
import { Axis } from 'semiotic'
<Axis
size={[ 20,200 ]}
scale={scaleLinear().domain([ 10, 1000 ]).range([ 20, 200 ])}
orient={'right'}
label={'A label for this axis'}
/>- size: {[width, height]}
- orient: { string }
- label: { string | object }
- tickValues: { array }
- ticks: { number }
- tickFormat: { function }
- tickLineGenerator: { function }
- rotate: { number }
- padding: { number }
- scale: { d3-scale }
- annotationFunction: { function }
- className: { string }
- margin: { object }
- name: { string }
If size is specified, sets the width and height of the axis from the array of values. The array must contain two numbers which represents the width and height, respectively.
<Axis size={[500,500]} ... />One of: left, right, top, bottom. Determines the position of the axis.
<Axis orient="left" ... />A string label that is presented along the axis or an object with name equivalent to the string label and optional settings to adjust its placement: { location, anchor, locationDistance }. Only locationDistance is honored in ORFrame radial axes (which are not generated by this component).
<!-- String Example -->
<Axis label="Units Sold" ... /><!-- Object Example -->
<Axis label={{ name: "Units Sold", location: "inside", anchor: "start", locationDistance: -20 }} ... />An explicit array of values where you want the ticks to display. This must be in a format that can be processed by the assigned scale.
<Axis tickValues={[1,2,3,4,5]} ... />A suggested number of ticks to display.
<Axis ticks={4} ... />A function that takes a tick value and returns the formatted tick value (string or component). Overrides format if both are set.
<Axis tickFormat={d => `${d} bunnies` } ... /><Axis tickFormat={d => <text className="axis-label">{`${d} bunnies`}</text> } ... />A function that takes axis properties (eg. xy = {x1,y1, x2,y2, tx, ty, value}) and returns a JSX object, such as a svg path, representing a single tick mark at the tick location.
<Axis
tickLineGenerator={({ xy }) => (
<path
style={{ fill: "lightgrey", stroke: "grey" }}
d={`M${xy.x1},${xy.y1 - 5}L${xy.x2},${xy.y1 - 5}L${xy.x2},${xy.y1 + 5}L${xy.x1},${xy.y1 + 5}Z`}
/>
)}
...
/>The rotation of the tick values (the text representing the value of the tick line).
<Axis rotate={45} ... />The space in pixels between the start of the tick line and the tick value.
<Axis padding={10} ... />The scale from which to generate the axis. The scale has to be a d3-scale like object.
<Axis scale={scaleLinear().domain([0,1]).range([0,500])} ... />If annotationFunction is assigned a function, it activates a hoverable region above the axis which places a line corresponding to the position of the cursor, and fires the function when you click with the value hovered over. This is useful for setting threshold annotations or measuring the data before or past a certain value.
<Axis annotationFunction={e => {this.setState({ clickedThreshold: e})} ... />Appended to the class of the element.
<Axis className="special" ... />An object of { left, right, top, bottom } that is used to determine the hoverable region when annotationFunction is set as well as the initial and end positions of tick lines and the position of tick values.
<Axis margin={{ top: 0, left: 50, bottom: 50, right: 0 }} ... />Used under the hood. Probably not something you'd find useful.
<Axis name="then-why-are-you-exposing-this?" ... />