Skip to content

Instantly share code, notes, and snippets.

@tmcw tmcw/ticks.js
Created Sep 26, 2016

Embed
What would you like to do?
import * as d3 from 'd3';
import React from 'react';
const top = 1;
const right = 2;
const bottom = 3;
const left = 4;
const epsilon = 1e-6;
function translateX(scale0, scale1, d) {
const x = scale0(d);
return `translate(${(isFinite(x) ? x : scale1(d))},0)`;
}
function translateY(scale0, scale1, d) {
const y = scale0(d);
return `translate(0,${(isFinite(y) ? y : scale1(d))})`;
}
let identity = x => x;
const orientations = {
top: 1,
right: 2,
bottom: 3,
left: 4
};
/**
* This is a port of the d3-axis component.
*/
export default React.createClass({
render() {
const orient = orientations[this.props.orientation] || 4;
const scale = this.props.scale;
var tickArguments = [],
tickValues = null,
tickFormat = null,
tickSizeInner = 6,
tickSizeOuter = 6,
tickPadding = 3;
var values = tickValues == null ? (scale.ticks ?
scale.ticks.apply(scale, tickArguments) : scale.domain()) : tickValues,
format = tickFormat == null ? (scale.tickFormat ?
scale.tickFormat.apply(scale, tickArguments) : identity) : tickFormat,
spacing = Math.max(tickSizeInner, 0) + tickPadding,
transform = orient === top || orient === bottom ? translateX : translateY,
range = scale.range(),
range0 = range[0] + 0.5,
range1 = range[range.length - 1] + 0.5,
position = (scale.bandwidth ? center : identity)(scale.copy()),
k = orient === top || orient === left ? -1 : 1,
x, y = orient === left || orient === right ? (x = 'x', 'y') : (x = 'y', 'x');
let lineProps = {
[x + 2]: k * tickSizeInner,
[y + 1]: 0.5,
[y + 2]: 0.5
};
let textProps = {
[x]: k * spacing,
[y]: 0.5
};
return <g>
<path d={orient === left || orient == right
? 'M' + k * tickSizeOuter + ',' + range0 + 'H0.5V' + range1 + 'H' + k * tickSizeOuter
: 'M' + range0 + ',' + k * tickSizeOuter + 'V0.5H' + range1 + 'V' + k * tickSizeOuter} />
{values.map((d, i) =>
<g
transform={transform(position, position, d)}
key={i}>
<line
stroke='#000'
{...lineProps} />
<text
fill='#000'
textAnchor={orient === right ? 'start' : orient === left ? 'end' : 'middle'}
{...textProps}
dy={orient === top ? '0em' : orient === bottom ? '0.71em' : '0.32em'}>{format(d)}</text>
</g>
)}
</g>;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.