Database Reference
In-Depth Information
rendered. In this case, the
datum
method can be used to bind the entire
array as a single element.
Scales and Axes
The previous examples have devoted a great deal of their code to the
appropriate transformation from the input domain to the output range. To
simplify this process, D3 has a number of built-in scale functions:
•
d3.scale.linear
performs a linear transformation from the input
domain to an output range. This is the most commonly used scale.
•
d3.scale.sqrt
,
d3.scale.pow
, and
d3.scale.log
perform
power transformations of the input domain to the output range.
•
d3.scale.quantize
converts a continuous input domain to a
discrete output range.
•
d3.scale.identity
is a simple linear identity scale.
•
d3.scale.ordinal
converts a discrete input domain to a continuous
output range.
•
d3.scale.category10
,
d3.scale.category20
,
d3.scale.category.20b
, and
d3.scale.category.20c
construct an ordinal scale that converts to 10 or 20 color categories.
Mostly, these scales are used to simplify range calculations. For example,
the bar chart example from the previous section can be further simplified by
usinglinearscalesforthexandycoordinates. Thexscaleisstatic,havingan
input domain between 0 and the number of possible elements in the array
(in this case 30). The y scale can change as data is added, so there is a check
that potentially updates the domain on each step:
var y = d3.scale.linear().domain([0,1])
.range([0,dim.height]);
var x = d3.scale.linear().domain([0,dataLen-1])
.range([0,dim.width]);
$(document).on('data:'+name,function(event,data) {
if(data > y.domain()[1]) y.domain([0,data]);
The calculations in the update step can then be updated with calls to the x
and y scales:
