SVG ose - VividD/d3 GitHub Wiki

Wiki ▸ API Reference ▸ SVG ▸ SVG Axes

D3’s komponenta osa automatski prikazuje referentne linije za skale. To vam omogucava da se fokusirate na prikaz podataka, dok za to vreme komponenta osa zavrsava tezak posao crtanja osa i oznacenih crtica na njima.

Ose

Komponenta osa je predvidjena da radi sa D3 kvantitivnim, vremenskim i ordinalnim skalama.

# d3.svg.axis()

Stvara novu podrazumevanu osu.

# axis(selection)

Primenjuje osu na selekciju ili tranziciju. Selekcija mora sadrzati barem jedan svg ili g element. Na primer:

d3.select("body").append("svg")
    .attr("class", "axis")
    .attr("width", 1440)
    .attr("height", 30)
  .append("g")
    .attr("transform", "translate(0,30)")
    .call(axis);

# axis.scale([skala])

Ako je skala is specificirana, postavlja skalu i vraca osu. Ako scale nije specificirana, vraca tekucu skalu cija je podrazumevana vrendost linearna skala.

# axis.orient([orijentacija])

If orijentacija is specified, sets the orientation and returns the axis. If orijentacija is not specified, returns the current orientation which defaults to "bottom". Sledece orijentacije su podrzane:

"top" - horizontalna osa sa crticama iznad linije domena
"bottom" - horizontalna osa sa crticama ispod linije domena
"left" - vertikalna osa sa crticama sa leve strane linije domena
"right" - vertikalna osa sa crticama sa desne strane linije domena

Ako specificirana orijentacija nije nijedna od podrzanih vrednosti, osa se vraca na podrazumevanu orijentaciju. Changing the orijentacija affects the position of the ticks and their labels in relation to the axis path, but does not change the position of the axis itself; da biste promenili polozaj ose u odnosu na crtez, specificirajte atribut transform nadredjenog g elementa.

# axis.ticks([arguments…])

If arguments are specified, stores the specified arguments for subsequent use in generating ticks and returns the axis. The arguments will later be passed to scale.ticks to generate tick values (unless tick values are specified explicitly via axis.tickValues). The arguments are also passed to the scale’s tickFormat method to generate the default tick format. If no arguments are specified, returns the current tick arguments, which default to [10].

Suitable arguments depends on the associated scale: for a linear scale, you might specify a tick count such as axis.ticks(20); for a log scale, you might specify both a count and a tick format; for a time scale, a time interval such as axis.ticks(d3.time.minutes, 15) might be appropriate.

# axis.tickValues([values])

If a values array is specified, the specified values are used for ticks, rather than using the scale's automatic tick generator. If values is null, clears any previously-set explicit tick values, reverting back to the scale's tick generator. If values is not specified, returns the currently-set tick values, which defaults to null. For example, to generate ticks at specific values:

var xAxis = d3.svg.axis()
    .scale(x)
    .tickValues([1, 2, 3, 5, 8, 13, 21]);

The explicit tick values take precedent over the tick arguments set by axis.ticks. However, any tick arguments will still be passed to the scale's tickFormat function if a tick format is not also set; thus, it may be valid to set both axis.ticks and axis.tickValues.

# axis.tickSize([inner, outer])

If inner, outer are specified, sets the inner and outer tick sizes to the specified value and returns the axis. If inner, outer are not specified, returns the current inner tick size, which defaults to 6.

# axis.innerTickSize([size])

If size is specified, sets the inner tick size to the specified value and returns the axis. If size is not specified, returns the current inner tick size, which defaults to 6. The inner tick size controls the length of the tick lines, offset from the native position of the axis.

# axis.outerTickSize([size])

If size is specified, sets the outer tick size to the specified value and returns the axis. If size is not specified, returns the current outer tick size, which defaults to 6. The outer tick size controls the length of the square ends of the domain path, offset from the native position of the axis. Thus, the “outer ticks” are not actually ticks but part of the domain path, and their position is determined by the associated scale's domain extent. Thus, outer ticks may overlap with the first or last inner tick. An outer tick size of 0 suppresses the square ends of the domain path, instead producing a straight line.

# axis.tickPadding([padding])

If padding is specified, sets the padding to the specified value in pixels and returns the axis. If padding is not specified, returns the current padding which defaults to 3 pixels.

# axis.tickFormat([format])

Ako je format specificiran, postavlja format na specificiranu funciju i vraca osu. If format is not specified, returns the current format function, which defaults to null. A null format indicates that the scale's default formatter should be used, which is generated by calling scale.tickFormat. In this case, the arguments specified by ticks are likewise passed to scale.tickFormat.

See d3.format for help creating formatters. For example, axis.tickFormat(d3.format(",.0f")) will display integers with comma-grouping for thousands. Defining the formatter first: var commasFormatter = d3.format(",.0f") lets you to call it as a function of your data, for example, to add currency units in front of the comma-grouped integers: .tickFormat(function(d) { return "$" + commasFormatter(d); }).

Napomena: Kod logaritamskih skala, broj crtica ne moze biti prilagodjivan; medjutim, broj oznaka crtica moze biti prilagodjen putem ticks. Likewise, the tick formatter for log scales is typically specified via ticks rather than tickFormat, so as to preserve the default label-hiding behavior.

SVG ose - VividD/d3 GitHub Wiki

Ose

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️