react-pixi-plot
Version:
A React component rendering a zoomable and draggable PIXI.js scene. Intended to render 2d plots
39 lines • 1.35 kB
JavaScript
import React, { Component } from 'react';
import * as d3Axis from 'd3-axis';
import { select as d3Select } from 'd3-selection';
export var AxisOrientation;
(function (AxisOrientation) {
AxisOrientation["TOP"] = "Top";
AxisOrientation["RIGHT"] = "Right";
AxisOrientation["BOTTOM"] = "Bottom";
AxisOrientation["LEFT"] = "Left";
})(AxisOrientation || (AxisOrientation = {}));
export default class Axis extends Component {
componentDidMount() {
this.renderAxis();
}
componentDidUpdate() {
this.renderAxis();
}
renderAxis() {
const { orient, tickValues, scale, numTicks, ticksRotate } = this.props;
const axisType = `axis${orient}`;
const axis = d3Axis[axisType](scale)
.tickSize(3).ticks(numTicks).tickValues(tickValues);
const selection = d3Select(this.axisElement).call(axis);
if (ticksRotate) {
selection.selectAll('text')
.style('text-anchor', 'end')
.attr('dx', '-.8em')
.attr('dy', '.15em')
.attr('transform', `rotate(${ticksRotate})`);
}
}
render() {
return React.createElement("g", { ref: (el) => { this.axisElement = el; }, transform: this.props.transform });
}
}
Axis.defaultProps = {
numTicks: 10,
};
//# sourceMappingURL=Axis.js.map