A drop-in replacement for d3 axis, with support for the d3fc decorate pattern.
npm install d3fc-axis
This is a drop-in replacement for d3-axis, so please refer to that project for detailed documentation.
Components that implement the decorate pattern expose a decorate
property which is passed the data join selection used to construct the component's DOM. This allows users of the component to add extra logic to the enter, update and exit selections.
For further details, consult the Decorate Pattern documentation.
The decorate pattern can be used to rotate the tick labels:
const scale = d3.scaleBand()
.domain(['Carrots', 'Bananas', 'Sausages', 'Pickles', 'Aubergines', 'Artichokes', 'Spinach', 'Cucumber'])
.range([0, 400]);
const axis = fc.axisBottom(scale)
.decorate(s =>
s.enter().select('text')
.style('text-anchor', 'start')
.attr('transform', 'rotate(45 -10 10)')
);
Or alternatively the tick index can be used to offset alternating labels:
const scale = d3.scaleBand()
.domain(['Carrots', 'Bananas', 'Sausages', 'Pickles', 'Aubergines', 'Artichokes', 'Spinach', 'Cucumber'])
.range([0, 400]);
const axis = fc.axisBottom(scale)
.decorate(s =>
s.enter().select('text')
.style('text-anchor', 'start')
.attr('transform', 'rotate(45 -10 10)')
);
In the example below, the value bound to each tick is used to colour values greater than or equal to 100:
const scale = d3.scaleLinear()
.domain([0, 140])
.range([0, 400])
.nice();
const axis = fc.axisBottom(scale)
.decorate((s) =>
s.enter()
.select('text')
.style('fill', function(d) {
return d >= 100 ? 'red' : 'black';
});
);