An alternative implementation of d3's quantitative scales
npm install axesAn alternative to d3's
quantitative scales
that handles multiple axes a little more conveniently.
I've found that in larger d3 projects I tend to create a few duplicate scales
across multiple charts, when really they'd be easier to manage/update them as a
group: being passed around into each chart as required, responding to updates
being made in other parts of the code.
`` bash`
$ npm install --save axes
` javascript
var linedata = require('./linedata.json')
var bardata = require('./bardata.json')
var d3 = require('d3')
var axes = require('axes')()
.def('barX')
.domain([0, bardata.length])
.def('barY')
.domain([0, d3.max(bardata)])
.def('lineX')
.domain([0, linedata.length])
.def('lineY')
.domain([0, d3.max(linedata)])
.root()
// Alias your scales so they play nice
// with the code you're giving it.
axes.barX(2) // 0.5
axes.alias({ x: 'barX' }).x(2) // 0.5
// Throw them into your charts
require('./barchart')({
axes: axes.alias({
x: 'barX'
, y: 'barY'
})
})
require('./linechart')({
axes: axes.alias({
x: 'lineX'
, x: 'lineY'
})
})
// Use axis.map for alternative value
// mappings.
var angle = axes.barX.map(function(n) {
return n.value Math.PI 2
})
angle({ value: 2 }) // 3.14159265...
`
Returns an anonymous scale, which is very similar to d3.scale.linear, but a
more limited API.
Takes an 2-element array defining the minimum and maximum input values for
the scale.
Takes an 2-element array defining the minimum and maximum output values for
the scale.
Returns a number between range[0] and range[1] depending on how far it isdomain[0]
between and domain[1].
The "update" event is called on handler every time the axis' range ordomain properties are updated.
Creates a copy of the axis, so that you can change its domain and range
values without altering the original one.
Returns a scale that maps its output according to map. The initial value willaxis
be scaled based on 's output. You can update these values in the
original scale and the scale's range will update accordingly too.
The returned scale essentially boils down to:
` javascript`
axis().map(mapper)(n) === mapper(axis(n))
Returns a new group of axes.
Returns a named scale, attached to this group.
Returns the group of axes.
The fork, alias and def methods on each group member will be called from
the group, to make for easier chaining.
Creates a copy of the group's member called old, called new.
Returns a copy of the group, while preserving the original references to each
member. map is an object: the keys determine the new name, and the values
determine the old one.
` javascript
var axes = require('axes')()
.def('oldX')
.range([0, 100])
var aliased = axes.alias({
oldX: 'newX'
})
axes.oldX(0.5) // 50
aliased.newX(0.5) // 50
aliased.oldX(0.5) // Object #
Copies the whole group, copying each member reference as well so you can make
can changes to this copy without having to worry about altering the other
scales.