React D3 Cannot Read Property 'scale' of Undefined
d3-scale
Scales are a user-friendly brainchild for a fundamental task in visualization: mapping a dimension of abstract information to a visual representation. Although nigh often used for position-encoding quantitative data, such as mapping a measurement in meters to a position in pixels for dots in a scatterplot, scales tin can correspond virtually any visual encoding, such as diverging colors, stroke widths, or symbol size. Scales can also be used with most whatsoever type of data, such as named chiselled data or discrete information that requires sensible breaks.
For continuous quantitative data, you typically want a linear scale. (For fourth dimension series data, a time scale.) If the distribution calls for it, consider transforming information using a power or log scale. A quantize calibration may aid differentiation by rounding continuous data to a fixed prepare of detached values; similarly, a quantile scale computes quantiles from a sample population, and a threshold scale allows you to specify arbitrary breaks in continuous information.
For discrete ordinal (ordered) or categorical (unordered) data, an ordinal scale specifies an explicit mapping from a set of data values to a corresponding set of visual attributes (such every bit colors). The related band and point scales are useful for position-encoding ordinal information, such equally bars in a bar nautical chart or dots in an chiselled scatterplot.
This repository does not provide color schemes; run across d3-scale-chromatic for color schemes designed to work with d3-scale.
Scales have no intrinsic visual representation. Notwithstanding, nigh scales tin can generate and format ticks for reference marks to assistance in the construction of axes.
For a longer introduction, encounter these recommended tutorials:
-
Introducing d3-calibration by Mike Bostock
-
Chapter 7. Scales of Interactive Information Visualization for the Web past Scott Murray
-
d3: scales, and color. past Jérôme Cukier
Installing
If y'all utilise npm, npm install d3-scale. You tin also download the latest release on GitHub. For vanilla HTML in modernistic browsers, import d3-scale from Skypack:
< script type="module"> import { scaleLinear } from "https://cdn.skypack.dev/d3-calibration@4" ; const x = scaleLinear ( ) ; </ script > For legacy environments, you tin load d3-scale's UMD packet from an npm-based CDN such as jsDelivr; a d3 global is exported:
< script src="https://cdn.jsdelivr.net/npm/d3-array@iii"> </ script > < script src="https://cdn.jsdelivr.internet/npm/d3-color@3"> </ script > < script src="https://cdn.jsdelivr.net/npm/d3-format@iii"> </ script > < script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"> </ script > < script src="https://cdn.jsdelivr.cyberspace/npm/d3-time@iii"> </ script > < script src="https://cdn.jsdelivr.net/npm/d3-fourth dimension-format@four"> </ script > < script src="https://cdn.jsdelivr.net/npm/d3-scale@4"> </ script > < script > const x = d3 . scaleLinear ( ) ; </ script > (You tin can omit d3-time and d3-fourth dimension-format if you're not using d3.scaleTime or d3.scaleUtc.)
API Reference
- Continuous (Linear, Ability, Log, Identity, Fourth dimension, Radial)
- Sequential
- Diverging
- Quantize
- Quantile
- Threshold
- Ordinal (Band, Indicate)
Continuous Scales
Continuous scales map a continuous, quantitative input domain to a continuous output range. If the range is as well numeric, the mapping may be inverted. A continuous scale is non synthetic directly; instead, endeavour a linear, ability, log, identity, radial, time or sequential colour scale.
# continuous(value) · Source, Examples
Given a value from the domain, returns the corresponding value from the range. If the given value is outside the domain, and clamping is not enabled, the mapping may be extrapolated such that the returned value is outside the range. For example, to apply a position encoding:
var ten = d3 . scaleLinear ( ) . domain ( [ 10 , 130 ] ) . range ( [ 0 , 960 ] ) ; 10 ( xx ) ; // fourscore 10 ( 50 ) ; // 320 Or to apply a colour encoding:
var color = d3 . scaleLinear ( ) . domain ( [ ten , 100 ] ) . range ( [ "brown" , "steelblue" ] ) ; color ( 20 ) ; // "#9a3439" color ( 50 ) ; // "#7b5167" Or, in shorthand:
var ten = d3 . scaleLinear ( [ x , 130 ] , [ 0 , 960 ] ) ; var colour = d3 . scaleLinear ( [ 10 , 100 ] , [ "brown" , "steelblue" ] ) ; # continuous.invert(value) · Source, Examples
Given a value from the range, returns the corresponding value from the domain. Inversion is useful for interaction, say to determine the data value corresponding to the position of the mouse. For example, to invert a position encoding:
var x = d3 . scaleLinear ( ) . domain ( [ 10 , 130 ] ) . range ( [ 0 , 960 ] ) ; x . invert ( eighty ) ; // xx x . invert ( 320 ) ; // 50 If the given value is exterior the range, and clamping is non enabled, the mapping may exist extrapolated such that the returned value is outside the domain. This method is only supported if the range is numeric. If the range is not numeric, returns NaN.
For a valid value y in the range, continuous(continuous.invert(y)) approximately equals y; similarly, for a valid value 10 in the domain, continuous.invert(continuous(x)) approximately equals 10. The scale and its changed may not be exact due to the limitations of floating indicate precision.
# continuous.domain([domain]) · Source, Examples
If domain is specified, sets the scale'southward domain to the specified array of numbers. The array must incorporate two or more than elements. If the elements in the given assortment are not numbers, they will be coerced to numbers. If domain is non specified, returns a copy of the scale's current domain.
Although continuous scales typically have two values each in their domain and range, specifying more than than ii values produces a piecewise scale. For example, to create a diverging colour scale that interpolates betwixt white and ruby-red for negative values, and white and green for positive values, say:
var color = d3 . scaleLinear ( ) . domain ( [ - 1 , 0 , one ] ) . range ( [ "red" , "white" , "green" ] ) ; color ( - 0.5 ) ; // "rgb(255, 128, 128)" color ( + 0.5 ) ; // "rgb(128, 192, 128)" Internally, a piecewise scale performs a binary search for the range interpolator corresponding to the given domain value. Thus, the domain must be in ascending or descending order. If the domain and range have different lengths Due north and 1000, just the showtime min(Northward,M) elements in each are observed.
# continuous.range([range]) · Source, Examples
If range is specified, sets the scale'south range to the specified array of values. The assortment must contain 2 or more elements. Unlike the domain, elements in the given array demand non be numbers; whatsoever value that is supported past the underlying interpolator volition piece of work, though note that numeric ranges are required for capsize. If range is not specified, returns a copy of the scale'due south electric current range. Run into continuous.interpolate for more examples.
# continuous.rangeRound([range]) · Source, Examples
Sets the scale's range to the specified array of values while also setting the scale's interpolator to interpolateRound. This is a convenience method equivalent to:
continuous . range ( range ) . interpolate ( d3 . interpolateRound ) ; The rounding interpolator is sometimes useful for avoiding antialiasing artifacts, though also consider the shape-rendering "crispEdges" styles. Notation that this interpolator can only be used with numeric ranges.
# continuous.clamp(clamp) · Source, Examples
If clamp is specified, enables or disables clamping accordingly. If clamping is disabled and the scale is passed a value outside the domain, the scale may return a value outside the range through extrapolation. If clamping is enabled, the return value of the scale is always within the calibration's range. Clamping similarly applies to continuous.invert. For instance:
var x = d3 . scaleLinear ( ) . domain ( [ ten , 130 ] ) . range ( [ 0 , 960 ] ) ; x ( - x ) ; // -160, outside range ten . invert ( - 160 ) ; // -10, outside domain ten . clamp ( true ) ; x ( - 10 ) ; // 0, clamped to range 10 . capsize ( - 160 ) ; // ten, clamped to domain If clamp is not specified, returns whether or not the scale currently clamps values to within the range.
# continuous.unknown([value]) · Source, Examples
If value is specified, sets the output value of the scale for undefined (or NaN) input values and returns this scale. If value is not specified, returns the current unknown value, which defaults to undefined.
# continuous.interpolate(interpolate) · Source, Examples
If interpolate is specified, sets the scale's range interpolator factory. This interpolator factory is used to create interpolators for each adjacent pair of values from the range; these interpolators and then map a normalized domain parameter t in [0, 1] to the respective value in the range. If factory is not specified, returns the calibration's current interpolator manufactory, which defaults to d3.interpolate. Meet d3-interpolate for more interpolators.
For case, consider a diverging color scale with three colors in the range:
var color = d3 . scaleLinear ( ) . domain ( [ - 100 , 0 , + 100 ] ) . range ( [ "red" , "white" , "green" ] ) ; Two interpolators are created internally by the scale, equivalent to:
var i0 = d3 . interpolate ( "red" , "white" ) , i1 = d3 . interpolate ( "white" , "green" ) ; A common reason to specify a custom interpolator is to change the color infinite of interpolation. For example, to use HCL:
var color = d3 . scaleLinear ( ) . domain ( [ x , 100 ] ) . range ( [ "brown" , "steelblue" ] ) . interpolate ( d3 . interpolateHcl ) ; Or for Cubehelix with a custom gamma:
var color = d3 . scaleLinear ( ) . domain ( [ 10 , 100 ] ) . range ( [ "brown" , "steelblue" ] ) . interpolate ( d3 . interpolateCubehelix . gamma ( 3 ) ) ; Note: the default interpolator may reuse render values. For instance, if the range values are objects, then the value interpolator always returns the same object, modifying it in-place. If the scale is used to set an attribute or style, this is typically acceptable (and desirable for performance); however, if you demand to store the scale's return value, you must specify your own interpolator or make a copy as advisable.
# continuous.ticks([count])
Returns approximately count representative values from the scale's domain. If count is not specified, it defaults to 10. The returned tick values are uniformly spaced, take human-readable values (such as multiples of powers of ten), and are guaranteed to exist within the extent of the domain. Ticks are oftentimes used to display reference lines, or tick marks, in conjunction with the visualized information. The specified count is only a hint; the scale may return more or fewer values depending on the domain. See too d3-array's ticks.
# continuous.tickFormat([count[, specifier]]) · Source, Examples
Returns a number format function suitable for displaying a tick value, automatically computing the advisable precision based on the fixed interval between tick values. The specified count should have the same value as the count that is used to generate the tick values.
An optional specifier allows a custom format where the precision of the format is automatically fix by the scale every bit advisable for the tick interval. For example, to format per centum change, you might say:
var x = d3 . scaleLinear ( ) . domain ( [ - ane , 1 ] ) . range ( [ 0 , 960 ] ) ; var ticks = 10 . ticks ( 5 ) , tickFormat = ten . tickFormat ( v , "+%" ) ; ticks . map ( tickFormat ) ; // ["-100%", "-fifty%", "+0%", "+fifty%", "+100%"] If specifier uses the format type s, the calibration will return a SI-prefix format based on the largest value in the domain. If the specifier already specifies a precision, this method is equivalent to locale.format.
See too d3.tickFormat.
# continuous.prissy([count]) · Source, Examples
Extends the domain so that it starts and ends on nice round values. This method typically modifies the scale'south domain, and may only extend the bounds to the nearest circular value. An optional tick count argument allows greater control over the step size used to extend the bounds, guaranteeing that the returned ticks will exactly embrace the domain. Nicing is useful if the domain is computed from information, say using extent, and may be irregular. For case, for a domain of [0.201479…, 0.996679…], a nice domain might be [0.2, ane.0]. If the domain has more than two values, nicing the domain only affects the start and last value. Run across also d3-assortment's tickStep.
Nicing a calibration only modifies the current domain; it does not automatically nice domains that are after gear up using continuous.domain. You must re-nice the scale afterwards setting the new domain, if desired.
# continuous.copy() · Source, Examples
Returns an exact copy of this scale. Changes to this scale volition not impact the returned scale, and vice versa.
# d3.tickFormat(start, stop, count[, specifier]) · Source, Examples
Returns a number format function suitable for displaying a tick value, automatically calculating the advisable precision based on the fixed interval betwixt tick values, as determined past d3.tickStep.
An optional specifier allows a custom format where the precision of the format is automatically fix by the scale as appropriate for the tick interval. For instance, to format pct modify, you might say:
var tickFormat = d3 . tickFormat ( - 1 , 1 , 5 , "+%" ) ; tickFormat ( - 0.5 ) ; // "-fifty%" If specifier uses the format type due south, the scale will return a SI-prefix format based on the larger accented value of start and cease. If the specifier already specifies a precision, this method is equivalent to locale.format.
Linear Scales
# d3.scaleLinear([[domain, ]range]) · Source, Examples
Constructs a new continuous scale with the specified domain and range, the default interpolator and clamping disabled. If either domain or range are non specified, each defaults to [0, one]. Linear scales are a good default choice for continuous quantitative data because they preserve proportional differences. Each range value y tin be expressed as a function of the domain value x: y = mx + b.
Power Scales
Power scales are like to linear scales, except an exponential transform is practical to the input domain value before the output range value is computed. Each range value y can be expressed as a part of the domain value x: y = mx^k + b, where one thousand is the exponent value. Power scales too support negative domain values, in which case the input value and the resulting output value are multiplied past -1.
# d3.scalePow([[domain, ]range]) · Source, Examples
Constructs a new continuous calibration with the specified domain and range, the exponent 1, the default interpolator and clamping disabled. If either domain or range are not specified, each defaults to [0, 1]. (Note that this is effectively a linear scale until you lot fix a different exponent.)
# pow(value) · Source, Examples
See continuous.
# pow.invert(value) · Source, Examples
Run into continuous.invert.
# pow.exponent([exponent]) · Source, Examples
If exponent is specified, sets the current exponent to the given numeric value. If exponent is not specified, returns the current exponent, which defaults to 1. (Annotation that this is finer a linear calibration until yous set a different exponent.)
# pow.domain([domain]) · Source, Examples
See continuous.domain.
# pow.range([range]) · Source, Examples
See continuous.range.
# pow.rangeRound([range]) · Source, Examples
Run into continuous.rangeRound.
# pow.clamp(clamp) · Source, Examples
See continuous.clench.
# pow.interpolate(interpolate) · Source, Examples
See continuous.interpolate.
# pow.ticks([count]) · Source, Examples
Meet continuous.ticks.
# pw.tickFormat([count[, specifier]]) · Source, Examples
See continuous.tickFormat.
# pow.prissy([count]) · Source, Examples
See continuous.nice.
# pw.re-create() · Source, Examples
Run across continuous.copy.
# d3.scaleSqrt([[domain, ]range]) · Source, Examples
Constructs a new continuous ability scale with the specified domain and range, the exponent 0.v, the default interpolator and clamping disabled. If either domain or range are not specified, each defaults to [0, 1]. This is a convenience method equivalent to d3.scalePow(…).exponent(0.5).
Log Scales
Log scales are like to linear scales, except a logarithmic transform is applied to the input domain value earlier the output range value is computed. The mapping to the range value y can exist expressed as a part of the domain value ten: y = g log(x) + b.
As log(0) = -∞, a log scale domain must be strictly-positive or strictly-negative; the domain must non include or cross zero. A log calibration with a positive domain has a well-divers behavior for positive values, and a log scale with a negative domain has a well-defined behavior for negative values. (For a negative domain, input and output values are implicitly multiplied past -1.) The beliefs of the scale is undefined if yous pass a negative value to a log scale with a positive domain or vice versa.
# d3.scaleLog([[domain, ]range]) · Source, Examples
Constructs a new continuous calibration with the specified domain and range, the base ten, the default interpolator and clamping disabled. If domain is not specified, information technology defaults to [i, 10]. If range is non specified, it defaults to [0, 1].
# log(value) · Source, Examples
Run across continuous.
# log.invert(value) · Source, Examples
See continuous.capsize.
# log.base of operations([base of operations]) · Source, Examples
If base is specified, sets the base for this logarithmic scale to the specified value. If base of operations is not specified, returns the electric current base, which defaults to 10.
# log.domain([domain]) · Source, Examples
Run into continuous.domain.
# log.range([range]) · Source, Examples
See continuous.range.
# log.rangeRound([range]) · Source, Examples
See continuous.rangeRound.
# log.clamp(clamp) · Source, Examples
See continuous.clamp.
# log.interpolate(interpolate) · Source, Examples
See continuous.interpolate.
# log.ticks([count]) · Source, Examples
Similar continuous.ticks, merely customized for a log scale. If the base is an integer, the returned ticks are uniformly spaced within each integer ability of base; otherwise, one tick per power of base of operations is returned. The returned ticks are guaranteed to be within the extent of the domain. If the orders of magnitude in the domain is greater than count, then at most ane tick per power is returned. Otherwise, the tick values are unfiltered, merely note that yous can utilise log.tickFormat to filter the display of tick labels. If count is not specified, it defaults to 10.
# log.tickFormat([count[, specifier]]) · Source, Examples
Similar continuous.tickFormat, but customized for a log calibration. The specified count typically has the same value as the count that is used to generate the tick values. If there are too many ticks, the formatter may return the empty string for some of the tick labels; however, note that the ticks are still shown. To disable filtering, specify a count of Infinity. When specifying a count, you may also provide a format specifier or format function. For example, to get a tick formatter that will display 20 ticks of a currency, say log.tickFormat(20, "$,f"). If the specifier does not accept a defined precision, the precision will be set automatically past the scale, returning the advisable format. This provides a convenient style of specifying a format whose precision will be automatically gear up by the scale.
# log.squeamish() · Source, Examples
Like continuous.overnice, except extends the domain to integer powers of base of operations. For example, for a domain of [0.201479…, 0.996679…], and base of operations 10, the dainty domain is [0.i, 1]. If the domain has more than 2 values, nicing the domain simply affects the first and last value.
# log.copy() · Source, Examples
See continuous.copy.
Symlog Scales
Meet A bi-symmetric log transformation for wide-range information by Webber for more.
# d3.scaleSymlog([[domain, ]range]) · Source, Examples
Constructs a new continuous scale with the specified domain and range, the constant 1, the default interpolator and clamping disabled. If domain is not specified, it defaults to [0, 1]. If range is non specified, information technology defaults to [0, 1].
# symlog.constant([constant]) · Source, Examples
If abiding is specified, sets the symlog constant to the specified number and returns this calibration; otherwise returns the electric current value of the symlog constant, which defaults to i. See "A bi-symmetric log transformation for wide-range data" by Webber for more.
Identity Scales
Identity scales are a special case of linear scales where the domain and range are identical; the scale and its invert method are thus the identity function. These scales are occasionally useful when working with pixel coordinates, say in conjunction with an axis. Identity scales do not support rangeRound, clamp or interpolate.
# d3.scaleIdentity([range]) · Source, Examples
Constructs a new identity scale with the specified domain and range. If range is not specified, it defaults to [0, one].
Radial Scales
Radial scales are a variant of linear scales where the range is internally squared so that an input value corresponds linearly to the squared output value. These scales are useful when you want the input value to correspond to the area of a graphical mark and the marking is specified by radius, as in a radial bar nautical chart. Radial scales practice not support interpolate.
# d3.scaleRadial([[domain, ]range]) · Source, Examples
Constructs a new radial calibration with the specified domain and range. If domain or range is not specified, each defaults to [0, i].
Time Scales
Time scales are a variant of linear scales that have a temporal domain: domain values are coerced to dates rather than numbers, and invert likewise returns a date. Time scales implement ticks based on agenda intervals, taking the pain out of generating axes for temporal domains.
For case, to create a position encoding:
var x = d3 . scaleTime ( ) . domain ( [ new Date ( 2000 , 0 , 1 ) , new Date ( 2000 , 0 , ii ) ] ) . range ( [ 0 , 960 ] ) ; x ( new Date ( 2000 , 0 , 1 , 5 ) ) ; // 200 x ( new Appointment ( 2000 , 0 , 1 , 16 ) ) ; // 640 x . invert ( 200 ) ; // Sabbatum Jan 01 2000 05:00:00 GMT-0800 (PST) x . invert ( 640 ) ; // Sat January 01 2000 xvi:00:00 GMT-0800 (PST) For a valid value y in the range, time(time.invert(y)) equals y; similarly, for a valid value x in the domain, time.invert(time(x)) equals x. The invert method is useful for interaction, say to determine the value in the domain that corresponds to the pixel location nether the mouse.
# d3.scaleTime([[domain, ]range]) · Source, Examples
Constructs a new fourth dimension calibration with the specified domain and range, the default interpolator and clamping disabled. If domain is not specified, it defaults to [2000-01-01, 2000-01-02]. If range is non specified, information technology defaults to [0, 1].
# time(value) · Source, Examples
See continuous.
# fourth dimension.invert(value) · Source, Examples
See continuous.invert.
# time.domain([domain]) · Source, Examples
See continuous.domain.
# time.range([range]) · Source, Examples
See continuous.range.
# time.rangeRound([range]) · Source, Examples
Meet continuous.rangeRound.
# time.clench(clamp) · Source, Examples
See continuous.clamp.
# time.interpolate(interpolate) · Source, Examples
See continuous.interpolate.
# time.ticks([count]) · Source, Examples
# time.ticks([interval])
Returns representative dates from the scale's domain. The returned tick values are uniformly-spaced (mostly), have sensible values (such as every day at midnight), and are guaranteed to be inside the extent of the domain. Ticks are oftentimes used to brandish reference lines, or tick marks, in conjunction with the visualized data.
An optional count may be specified to affect how many ticks are generated. If count is not specified, it defaults to 10. The specified count is merely a hint; the scale may render more than or fewer values depending on the domain. For example, to create ten default ticks, say:
var 10 = d3 . scaleTime ( ) ; x . ticks ( 10 ) ; // [Sat January 01 2000 00:00:00 GMT-0800 (PST), // Sat Jan 01 2000 03:00:00 GMT-0800 (PST), // Sat January 01 2000 06:00:00 GMT-0800 (PST), // Sat Jan 01 2000 09:00:00 GMT-0800 (PST), // Sat January 01 2000 12:00:00 GMT-0800 (PST), // Sat Jan 01 2000 xv:00:00 GMT-0800 (PST), // Sabbatum Jan 01 2000 18:00:00 GMT-0800 (PST), // Sat January 01 2000 21:00:00 GMT-0800 (PST), // Sun Jan 02 2000 00:00:00 GMT-0800 (PST)] The following time intervals are considered for automatic ticks:
- i-, 5-, xv- and 30-second.
- ane-, 5-, 15- and thirty-minute.
- one-, 3-, 6- and 12-60 minutes.
- one- and 2-day.
- 1-week.
- 1- and iii-month.
- 1-year.
In lieu of a count, a time interval may exist explicitly specified. To prune the generated ticks for a given time interval, use interval.every. For instance, to generate ticks at xv-minute intervals:
var 10 = d3 . scaleTime ( ) . domain ( [ new Date ( 2000 , 0 , i , 0 ) , new Date ( 2000 , 0 , 1 , 2 ) ] ) ; x . ticks ( d3 . timeMinute . every ( 15 ) ) ; // [Sat Jan 01 2000 00:00:00 GMT-0800 (PST), // Sat Jan 01 2000 00:15:00 GMT-0800 (PST), // Sabbatum Jan 01 2000 00:30:00 GMT-0800 (PST), // Sat January 01 2000 00:45:00 GMT-0800 (PST), // Sat Jan 01 2000 01:00:00 GMT-0800 (PST), // Sat Jan 01 2000 01:15:00 GMT-0800 (PST), // Sat Jan 01 2000 01:30:00 GMT-0800 (PST), // Sabbatum January 01 2000 01:45:00 GMT-0800 (PST), // Saturday Jan 01 2000 02:00:00 GMT-0800 (PST)] Alternatively, laissez passer a test function to interval.filter:
10 . ticks ( d3 . timeMinute . filter ( office ( d ) { render d . getMinutes ( ) % xv === 0 ; } ) ) ; Annotation: in some cases, such every bit with day ticks, specifying a step can result in irregular spacing of ticks considering fourth dimension intervals have varying length.
# time.tickFormat([count[, specifier]]) · Source, Examples
# time.tickFormat([interval[, specifier]])
Returns a fourth dimension format function suitable for displaying tick values. The specified count or interval is currently ignored, but is accepted for consistency with other scales such equally continuous.tickFormat. If a format specifier is specified, this method is equivalent to format. If specifier is non specified, the default time format is returned. The default multi-scale time format chooses a human-readable representation based on the specified engagement equally follows:
-
%Y- for yr boundaries, such equally2011. -
%B- for month boundaries, such asFeb. -
%b %d- for week boundaries, such asFeb 06. -
%a %d- for mean solar day boundaries, such equallyMonday 07. -
%I %p- for hour boundaries, such equally01 AM. -
%I:%Grand- for minute boundaries, such as01:23. -
:%S- for second boundaries, such as:45. -
.%L- milliseconds for all other times, such as.012.
Although somewhat unusual, this default behavior has the benefit of providing both local and global context: for instance, formatting a sequence of ticks as [11 PM, Monday 07, 01 AM] reveals information about hours, dates, and day simultaneously, rather than just the hours [11 PM, 12 AM, 01 AM]. Encounter d3-time-format if you'd like to roll your own conditional time format.
# fourth dimension.nice([count]) · Source, Examples
# time.nice([interval])
Extends the domain then that it starts and ends on overnice round values. This method typically modifies the calibration'southward domain, and may only extend the premises to the nearest round value. Run across continuous.nice for more.
An optional tick count argument allows greater control over the step size used to extend the bounds, guaranteeing that the returned ticks will exactly cover the domain. Alternatively, a time interval may be specified to explicitly fix the ticks. If an interval is specified, an optional step may also be specified to skip some ticks. For example, time.overnice(d3.timeSecond.every(10)) volition extend the domain to an even 10 seconds (0, 10, xx, etc.). Come across time.ticks and interval.every for further detail.
Nicing is useful if the domain is computed from data, say using extent, and may be irregular. For example, for a domain of [2009-07-13T00:02, 2009-07-13T23:48], the prissy domain is [2009-07-13, 2009-07-fourteen]. If the domain has more than two values, nicing the domain only affects the commencement and last value.
# time.copy() · Source, Examples
See continuous.re-create.
# d3.scaleUtc([[domain, ]range]) · Source, Examples
Equivalent to scaleTime, but the returned time calibration operates in Coordinated Universal Time rather than local time.
Sequential Scales
Sequential scales, similar diverging scales, are like to continuous scales in that they map a continuous, numeric input domain to a continuous output range. However, different continuous scales, the input domain and output range of a sequential scale ever has exactly two elements, and the output range is typically specified every bit an interpolator rather than an array of values. These scales exercise non expose invert and interpolate methods.
# d3.scaleSequential([[domain, ]interpolator]) · Source, Examples
Constructs a new sequential scale with the specified domain and interpolator function or array. If domain is non specified, it defaults to [0, 1]. If interpolator is not specified, it defaults to the identity function. When the calibration is applied, the interpolator will be invoked with a value typically in the range [0, i], where 0 represents the minimum value and 1 represents the maximum value. For example, to implement the ill-advised HSL rainbow scale:
var rainbow = d3 . scaleSequential ( role ( t ) { return d3 . hsl ( t * 360 , 1 , 0.v ) + "" ; } ) ; A more aesthetically-pleasing and perceptually-effective cyclical hue encoding is to use d3.interpolateRainbow:
var rainbow = d3 . scaleSequential ( d3 . interpolateRainbow ) ; If interpolator is an assortment, information technology represents the calibration's two-element output range and is converted to an interpolator role using d3.interpolate.
# sequential(value) · Source, Examples
See continuous.
# sequential.domain([domain]) · Source, Examples
Run across continuous.domain. Annotation that a sequential scale's domain must exist numeric and must contain exactly two values.
# sequential.clamp([clench]) · Source, Examples
Run into continuous.clamp.
# sequential.interpolator([interpolator]) · Source, Examples
If interpolator is specified, sets the scale's interpolator to the specified office. If interpolator is not specified, returns the scale's current interpolator.
# sequential.range([range]) · Source, Examples
See continuous.range. If range is specified, the given ii-chemical element array is converted to an interpolator function using d3.interpolate.
# sequential.rangeRound([range]) · Source, Examples
Encounter continuous.rangeRound. If range is specified, implicitly uses d3.interpolateRound every bit the interpolator.
# sequential.copy() · Source, Examples
See continuous.re-create.
# d3.scaleSequentialLog([[domain, ]range]) · Source, Examples
A sequential scale with a logarithmic transform, analogous to a log scale.
# d3.scaleSequentialPow([[domain, ]range]) · Source, Examples
A sequential scale with an exponential transform, analogous to a power scale.
# d3.scaleSequentialSqrt([[domain, ]range]) · Source, Examples
A sequential calibration with a square-root transform, coordinating to a d3.scaleSqrt.
# d3.scaleSequentialSymlog([[domain, ]range]) · Source, Examples
A sequential scale with a symmetric logarithmic transform, analogous to a symlog scale.
# d3.scaleSequentialQuantile([[domain, ]range]) · Source, Examples
A sequential scale using a p-quantile transform, analogous to a quantile scale.
# sequentialQuantile.quantiles(n) · Source, Examples
Returns an array of north + ane quantiles. For example, if northward = 4, returns an assortment of five numbers: the minimum value, the starting time quartile, the median, the tertiary quartile, and the maximum.
Diverging Scales
Diverging scales, like sequential scales, are like to continuous scales in that they map a continuous, numeric input domain to a continuous output range. However, unlike continuous scales, the input domain and output range of a diverging scale always has exactly three elements, and the output range is typically specified as an interpolator rather than an array of values. These scales do not expose invert and interpolate methods.
# d3.scaleDiverging([[domain, ]interpolator]) · Source, Examples
Constructs a new diverging scale with the specified domain and interpolator function or array. If domain is not specified, it defaults to [0, 0.5, ane]. If interpolator is not specified, it defaults to the identity function. When the calibration is practical, the interpolator will exist invoked with a value typically in the range [0, i], where 0 represents the extreme negative value, 0.five represents the neutral value, and ane represents the extreme positive value. For case, using d3.interpolateSpectral:
var spectral = d3 . scaleDiverging ( d3 . interpolateSpectral ) ; If interpolator is an array, it represents the scale'southward three-chemical element output range and is converted to an interpolator office using d3.interpolate and d3.piecewise.
# diverging(value) · Source, Examples
Run across continuous.
# diverging.domain([domain]) · Source, Examples
See continuous.domain. Notation that a diverging scale's domain must be numeric and must contain exactly three values. The default domain is [0, 0.5, one].
# diverging.clamp([clamp]) · Source, Examples
Run across continuous.clamp.
# diverging.interpolator([interpolator]) · Source, Examples
If interpolator is specified, sets the scale's interpolator to the specified function. If interpolator is not specified, returns the scale's electric current interpolator.
# diverging.range([range]) · Source, Examples
Run across continuous.range. If range is specified, the given three-element array is converted to an interpolator function using d3.interpolate and d3.piecewise.
# diverging.rangeRound([range]) · Source, Examples
See continuous.range. If range is specified, implicitly uses d3.interpolateRound as the interpolator.
# diverging.copy() · Source, Examples
See continuous.copy.
# diverging.unknown() · Source, Examples
See continuous.unknown.
# d3.scaleDivergingLog([[domain, ]range]) · Source, Examples
A diverging scale with a logarithmic transform, coordinating to a log scale.
# d3.scaleDivergingPow([[domain, ]range]) · Source, Examples
A diverging calibration with an exponential transform, analogous to a power calibration.
# d3.scaleDivergingSqrt([[domain, ]range]) · Source, Examples
A diverging scale with a square-root transform, coordinating to a d3.scaleSqrt.
# d3.scaleDivergingSymlog([[domain, ]range]) · Source, Examples
A diverging scale with a symmetric logarithmic transform, analogous to a symlog scale.
Quantize Scales
Quantize scales are similar to linear scales, except they use a discrete rather than continuous range. The continuous input domain is divided into uniform segments based on the number of values in (i.east., the cardinality of) the output range. Each range value y can be expressed as a quantized linear role of the domain value ten: y = thousand round(10) + b. See this choropleth for an example.
# d3.scaleQuantize([[domain, ]range]) · Source, Examples
Constructs a new quantize scale with the specified domain and range. If either domain or range is not specified, each defaults to [0, 1]. Thus, the default quantize calibration is equivalent to the Math.round office.
# quantize(value) · Source, Examples
Given a value in the input domain, returns the corresponding value in the output range. For example, to use a color encoding:
var color = d3 . scaleQuantize ( ) . domain ( [ 0 , 1 ] ) . range ( [ "brown" , "steelblue" ] ) ; color ( 0.49 ) ; // "brown" color ( 0.51 ) ; // "steelblue" Or dividing the domain into iii as-sized parts with unlike range values to compute an appropriate stroke width:
var width = d3 . scaleQuantize ( ) . domain ( [ 10 , 100 ] ) . range ( [ i , two , 4 ] ) ; width ( xx ) ; // 1 width ( 50 ) ; // 2 width ( 80 ) ; // 4 # quantize.invertExtent(value) · Source, Examples
Returns the extent of values in the domain [x0, x1] for the corresponding value in the range: the changed of quantize. This method is useful for interaction, say to decide the value in the domain that corresponds to the pixel location under the mouse.
var width = d3 . scaleQuantize ( ) . domain ( [ x , 100 ] ) . range ( [ 1 , 2 , 4 ] ) ; width . invertExtent ( 2 ) ; // [twoscore, 70] # quantize.domain([domain]) · Source, Examples
If domain is specified, sets the scale's domain to the specified two-element array of numbers. If the elements in the given assortment are not numbers, they will be coerced to numbers. The numbers must be in ascending order or the beliefs of the scale is undefined. If domain is not specified, returns the scale'south current domain.
# quantize.range([range]) · Source, Examples
If range is specified, sets the calibration'southward range to the specified assortment of values. The assortment may comprise whatever number of detached values. The elements in the given array need not be numbers; whatever value or type volition piece of work. If range is not specified, returns the calibration's current range.
# quantize.ticks([count]) · Source, Examples
Equivalent to continuous.ticks.
# quantize.tickFormat([count[, specifier]]) · Source, Examples
Equivalent to continuous.tickFormat.
# quantize.nice() · Source, Examples
Equivalent to continuous.nice.
# quantize.thresholds() · Source, Examples
Returns the array of computed thresholds inside the domain.
# quantize.copy() · Source, Examples
Returns an exact copy of this scale. Changes to this scale volition not affect the returned scale, and vice versa.
Quantile Scales
Quantile scales map a sampled input domain to a discrete range. The domain is considered continuous and thus the scale volition have any reasonable input value; however, the domain is specified equally a detached set of sample values. The number of values in (the cardinality of) the output range determines the number of quantiles that volition exist computed from the domain. To compute the quantiles, the domain is sorted, and treated as a population of discrete values; see d3-assortment's quantile. See this quantile choropleth for an case.
# d3.scaleQuantile([[domain, ]range]) · Source, Examples
Constructs a new quantile scale with the specified domain and range. If either domain or range is not specified, each defaults to the empty assortment. The quantile scale is invalid until both a domain and range are specified.
# quantile(value) · Source, Examples
Given a value in the input domain, returns the corresponding value in the output range.
# quantile.invertExtent(value) · Source, Examples
Returns the extent of values in the domain [x0, x1] for the respective value in the range: the changed of quantile. This method is useful for interaction, say to decide the value in the domain that corresponds to the pixel location under the mouse.
# quantile.domain([domain]) · Source, Examples
If domain is specified, sets the domain of the quantile calibration to the specified set of discrete numeric values. The array must not be empty, and must contain at least one numeric value; NaN, zero and undefined values are ignored and not considered part of the sample population. If the elements in the given array are non numbers, they will be coerced to numbers. A copy of the input array is sorted and stored internally. If domain is not specified, returns the calibration'southward current domain.
# quantile.range([range]) · Source, Examples
If range is specified, sets the detached values in the range. The array must not be empty, and may incorporate any type of value. The number of values in (the cardinality, or length, of) the range array determines the number of quantiles that are computed. For example, to compute quartiles, range must be an assortment of iv elements such as [0, 1, 2, iii]. If range is not specified, returns the current range.
# quantile.quantiles() · Source, Examples
Returns the quantile thresholds. If the range contains north discrete values, the returned assortment will contain n - one thresholds. Values less than the outset threshold are considered in the first quantile; values greater than or equal to the first threshold merely less than the second threshold are in the 2nd quantile, and so on. Internally, the thresholds array is used with bisect to find the output quantile associated with the given input value.
# quantile.copy() · Source, Examples
Returns an exact re-create of this scale. Changes to this scale volition not touch the returned scale, and vice versa.
Threshold Scales
Threshold scales are like to quantize scales, except they allow yous to map capricious subsets of the domain to detached values in the range. The input domain is still continuous, and divided into slices based on a prepare of threshold values. See this choropleth for an case.
# d3.scaleThreshold([[domain, ]range]) · Source, Examples
Constructs a new threshold calibration with the specified domain and range. If domain is non specified, it defaults to [0.v]. If range is not specified, it defaults to [0, 1]. Thus, the default threshold calibration is equivalent to the Math.round function for numbers; for example threshold(0.49) returns 0, and threshold(0.51) returns 1.
# threshold(value) · Source, Examples
Given a value in the input domain, returns the corresponding value in the output range. For example:
var color = d3 . scaleThreshold ( ) . domain ( [ 0 , one ] ) . range ( [ "red" , "white" , "green" ] ) ; color ( - 1 ) ; // "red" color ( 0 ) ; // "white" color ( 0.5 ) ; // "white" color ( 1 ) ; // "dark-green" color ( 1000 ) ; // "green" # threshold.invertExtent(value) · Source, Examples
Returns the extent of values in the domain [x0, x1] for the corresponding value in the range, representing the changed mapping from range to domain. This method is useful for interaction, say to determine the value in the domain that corresponds to the pixel location under the mouse. For instance:
var color = d3 . scaleThreshold ( ) . domain ( [ 0 , one ] ) . range ( [ "cerise" , "white" , "greenish" ] ) ; color . invertExtent ( "red" ) ; // [undefined, 0] color . invertExtent ( "white" ) ; // [0, one] colour . invertExtent ( "green" ) ; // [ane, undefined] # threshold.domain([domain]) · Source, Examples
If domain is specified, sets the scale's domain to the specified array of values. The values must exist in ascending order or the behavior of the scale is undefined. The values are typically numbers, just any naturally ordered values (such as strings) will work; a threshold scale can be used to encode whatsoever type that is ordered. If the number of values in the scale'due south range is N+1, the number of values in the calibration's domain must exist Due north. If there are fewer than N elements in the domain, the additional values in the range are ignored. If there are more than N elements in the domain, the scale may return undefined for some inputs. If domain is not specified, returns the scale's current domain.
# threshold.range([range]) · Source, Examples
If range is specified, sets the scale's range to the specified array of values. If the number of values in the scale's domain is N, the number of values in the scale's range must be N+1. If there are fewer than N+1 elements in the range, the scale may return undefined for some inputs. If there are more than N+1 elements in the range, the boosted values are ignored. The elements in the given assortment need not be numbers; any value or type volition work. If range is not specified, returns the scale's current range.
# threshold.copy() · Source, Examples
Returns an exact re-create of this calibration. Changes to this scale will not affect the returned scale, and vice versa.
Ordinal Scales
Dissimilar continuous scales, ordinal scales have a discrete domain and range. For case, an ordinal scale might map a fix of named categories to a gear up of colors, or decide the horizontal positions of columns in a column chart.
# d3.scaleOrdinal([[domain, ]range]) · Source, Examples
Constructs a new ordinal calibration with the specified domain and range. If domain is not specified, information technology defaults to the empty array. If range is not specified, it defaults to the empty array; an ordinal scale always returns undefined until a non-empty range is defined.
# ordinal(value) · Source, Examples
Given a value in the input domain, returns the corresponding value in the output range. If the given value is not in the scale's domain, returns the unknown; or, if the unknown value is implicit (the default), so the value is implicitly added to the domain and the adjacent-available value in the range is assigned to value, such that this and subsequent invocations of the scale given the same input value render the same output value.
# ordinal.domain([domain]) · Source, Examples
If domain is specified, sets the domain to the specified array of values. The first element in domain will exist mapped to the beginning element in the range, the 2d domain value to the 2d range value, and and so on. Domain values are stored internally in an InternMap from primitive value to index; the resulting index is then used to call back a value from the range. Thus, an ordinal calibration's values must exist coercible to a primitive value, and the primitive domain value uniquely identifies the respective range value. If domain is not specified, this method returns the current domain.
Setting the domain on an ordinal calibration is optional if the unknown value is implicit (the default). In this example, the domain will be inferred implicitly from usage by assigning each unique value passed to the scale a new value from the range. Note that an explicit domain is recommended to ensure deterministic behavior, as inferring the domain from usage will be dependent on ordering.
# ordinal.range([range]) · Source, Examples
If range is specified, sets the range of the ordinal scale to the specified array of values. The showtime chemical element in the domain will be mapped to the starting time element in range, the 2d domain value to the second range value, then on. If there are fewer elements in the range than in the domain, the scale volition reuse values from the get-go of the range. If range is not specified, this method returns the current range.
# ordinal.unknown([value]) · Source, Examples
If value is specified, sets the output value of the scale for unknown input values and returns this scale. If value is not specified, returns the current unknown value, which defaults to implicit. The implicit value enables implicit domain structure; see ordinal.domain.
# ordinal.re-create() · Source, Examples
Returns an exact copy of this ordinal scale. Changes to this scale will non impact the returned scale, and vice versa.
# d3.scaleImplicit · Source, Examples
A special value for ordinal.unknown that enables implicit domain construction: unknown values are implicitly added to the domain.
Band Scales
Ring scales are like ordinal scales except the output range is continuous and numeric. Discrete output values are automatically computed by the calibration by dividing the continuous range into uniform bands. Band scales are typically used for bar charts with an ordinal or categorical dimension. The unknown value of a band scale is finer undefined: they do not permit implicit domain structure.
# d3.scaleBand([[domain, ]range]) · Source, Examples
Constructs a new band scale with the specified domain and range, no padding, no rounding and center alignment. If domain is not specified, it defaults to the empty domain. If range is not specified, it defaults to the unit range [0, 1].
# band(value) · Source, Examples
Given a value in the input domain, returns the first of the respective band derived from the output range. If the given value is not in the scale'due south domain, returns undefined.
# ring.domain([domain]) · Source, Examples
If domain is specified, sets the domain to the specified array of values. The first element in domain volition exist mapped to the offset band, the second domain value to the 2d band, and so on. Domain values are stored internally in an InternMap from primitive value to index; the resulting index is then used to determine the band. Thus, a band calibration's values must exist coercible to a primitive value, and the archaic domain value uniquely identifies the respective band. If domain is not specified, this method returns the current domain.
# band.range([range]) · Source, Examples
If range is specified, sets the scale'southward range to the specified two-element assortment of numbers. If the elements in the given array are non numbers, they will be coerced to numbers. If range is not specified, returns the scale's current range, which defaults to [0, 1].
# ring.rangeRound([range]) · Source, Examples
Sets the calibration's range to the specified 2-chemical element array of numbers while as well enabling rounding. This is a convenience method equivalent to:
band . range ( range ) . round ( truthful ) ; Rounding is sometimes useful for avoiding antialiasing artifacts, though also consider the shape-rendering "crispEdges" styles.
# ring.round([round]) · Source, Examples
If circular is specified, enables or disables rounding appropriately. If rounding is enabled, the start and end of each ring will be integers. Rounding is sometimes useful for fugitive antialiasing artifacts, though besides consider the shape-rendering "crispEdges" styles. Notation that if the width of the domain is not a multiple of the cardinality of the range, there may be leftover unused infinite, even without padding! Use band.align to specify how the leftover space is distributed.
# band.paddingInner([padding]) · Source, Examples
If padding is specified, sets the inner padding to the specified number which must be less than or equal to one. If padding is not specified, returns the current inner padding which defaults to 0. The inner padding specifies the proportion of the range that is reserved for blank space between bands; a value of 0 means no blank space betwixt bands, and a value of one means a bandwidth of aught.
# ring.paddingOuter([padding]) · Source, Examples
If padding is specified, sets the outer padding to the specified number which is typically in the range [0, 1]. If padding is non specified, returns the electric current outer padding which defaults to 0. The outer padding specifies the corporeality of bare space, in terms of multiples of the pace, to reserve before the first band and afterwards the final band.
# band.padding([padding]) · Source, Examples
A convenience method for setting the inner and outer padding to the aforementioned padding value. If padding is not specified, returns the inner padding.
# band.marshal([align]) · Source, Examples
If align is specified, sets the alignment to the specified value which must be in the range [0, ane]. If align is not specified, returns the current alignment which defaults to 0.5. The alignment specifies how outer padding is distributed in the range. A value of 0.5 indicates that the outer padding should exist equally distributed earlier the first band and subsequently the terminal band; i.e., the bands should be centered within the range. A value of 0 or 1 may be used to shift the bands to one side, say to position them adjacent to an axis. For more, see this explainer.
# ring.bandwidth() · Source, Examples
Returns the width of each band.
# band.step() · Source, Examples
Returns the distance between the starts of adjacent bands.
# band.copy() · Source, Examples
Returns an exact copy of this scale. Changes to this scale will non affect the returned calibration, and vice versa.
Signal Scales
Point scales are a variant of ring scales with the bandwidth fixed to zip. Bespeak scales are typically used for scatterplots with an ordinal or categorical dimension. The unknown value of a point calibration is e'er undefined: they do not permit implicit domain construction.
# d3.scalePoint([[domain, ]range]) · Source, Examples
Constructs a new signal scale with the specified domain and range, no padding, no rounding and center alignment. If domain is non specified, information technology defaults to the empty domain. If range is not specified, it defaults to the unit range [0, ane].
# betoken(value) · Source, Examples
Given a value in the input domain, returns the corresponding point derived from the output range. If the given value is not in the scale'south domain, returns undefined.
# point.domain([domain]) · Source, Examples
If domain is specified, sets the domain to the specified assortment of values. The offset chemical element in domain will be mapped to the first signal, the 2d domain value to the second point, and so on. Domain values are stored internally in an InternMap from primitive value to index; the resulting index is then used to determine the indicate. Thus, a point scale's values must exist coercible to a primitive value, and the archaic domain value uniquely identifies the corresponding point. If domain is not specified, this method returns the electric current domain.
# point.range([range]) · Source, Examples
If range is specified, sets the calibration'south range to the specified two-chemical element array of numbers. If the elements in the given assortment are not numbers, they will be coerced to numbers. If range is not specified, returns the scale'south current range, which defaults to [0, 1].
# bespeak.rangeRound([range]) · Source, Examples
Sets the scale's range to the specified two-element array of numbers while also enabling rounding. This is a convenience method equivalent to:
point . range ( range ) . round ( true ) ; Rounding is sometimes useful for avoiding antialiasing artifacts, though also consider the shape-rendering "crispEdges" styles.
# point.round([round]) · Source, Examples
If round is specified, enables or disables rounding appropriately. If rounding is enabled, the position of each point volition be integers. Rounding is sometimes useful for avoiding antialiasing artifacts, though also consider the shape-rendering "crispEdges" styles. Note that if the width of the domain is not a multiple of the cardinality of the range, in that location may exist leftover unused infinite, even without padding! Use point.align to specify how the leftover space is distributed.
# point.padding([padding]) · Source, Examples
If padding is specified, sets the outer padding to the specified number which is typically in the range [0, 1]. If padding is not specified, returns the current outer padding which defaults to 0. The outer padding specifies the amount of blank infinite, in terms of multiples of the step, to reserve before the first point and after the last signal. Equivalent to band.paddingOuter.
# point.align([align]) · Source, Examples
If align is specified, sets the alignment to the specified value which must be in the range [0, one]. If align is not specified, returns the current alignment which defaults to 0.5. The alignment specifies how whatsoever leftover unused infinite in the range is distributed. A value of 0.5 indicates that the leftover space should be equally distributed before the first point and later the terminal betoken; i.e., the points should exist centered inside the range. A value of 0 or i may exist used to shift the points to one side, say to position them adjacent to an centrality.
# point.bandwidth() · Source, Examples
Returns zero.
# point.step() · Source, Examples
Returns the distance betwixt the starts of adjacent points.
# indicate.re-create() · Source, Examples
Returns an exact re-create of this scale. Changes to this scale will not affect the returned calibration, and vice versa.
Source: https://www.npmjs.com/package/d3-scale
0 Response to "React D3 Cannot Read Property 'scale' of Undefined"
Post a Comment