SVG Axes

Wiki ▸ API Reference ▸ SVG ▸ SVG Axes

D3의 axis 컴포넌트는 자동으로 스케일링 되는 참조 라인을 출력한다. axis 컴포넌트가 축을 그리고 축에 구분자에 라벨링을 하는 지루한 작업을 관리해주므로 개발자는 데이터 표현에만 집중할 수 있다.

Axis

축(axis) 컴포넌트는 D3의 모든 quantitative scales와 함께 사용할 수 있도록 설계되었다.

# d3.svg.axis()

기본 축을 새로 생성한다.

# axis(selection)

selection이나 transition으로 축을 적용한다. selection은 SVG나 G element를 갖고 있어야 한다. 예제를 보자.

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([scale])

축과 관련된 스케일을 get or set. scale을 인자로 넘기면 스케일을 지정하고 축을 반환한다. scale 인자가 없으면 현재 스케일을 반환한다. 기본값은 linear scale.

# axis.orient([orientation])

축 위치를 set, get 한다. orientation 인자를 넘기면 축 위치를 지정하고 그 축을 반환한다. orientation 인자를 지정하지 않으면 현재 축 위치를 반환한다. 기본값은 "buttom"이다. 유효한 값은 "top", "bottom", "left", "right"이다. 수직 축은 "left", "right"를 지정하고 수평축은 "buttom", "top"을 지정한다.

# axis.ticks([arguments…])

Get or set the arguments that are passed to the underlying scale’s tick function. The specified arguments are passed to scale.ticks to compute the tick values. For quantitative scales, specify the desired tick count such as axis.ticks(20). For time scales, you can pass in a count or a function, such as axis.ticks(d3.time.minutes, 15).

The arguments are also passed to the scale’s tickFormat method to generate the default tick format. Thus, for log scales, you might specify both a count and a tick format function.

# axis.tickValues([values])

Get or set the explicit tick values. If the array values is specified, the values are used to generate ticks rather than using the scale's 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, if any. 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. Note, however, that the tick arguments are still passed to the scale's tickFormat function if tick format is not also set. Thus, it is valid to set both axis.ticks and axis.tickValues.

# axis.tickSubdivide([count])

하위 구분자의 개수를 get or set. count를 인자로 넘기면, 주 구분자 마크 사이를 몇 등분할 건지 지정한 후에 축(axis)를 반환한다. count 인자를 넘기지 않으면 하위 구분이 현재 몇등분 되었는지 반환한다. 기본값은 0. 지정한 count는 하위 구분자 수를 실제 구분된 수 보다 하나 작게 설정한다.(3등분하면 구분자는 2개라는 뜻.) 예를 들면 axis.tickSubdivide( true )는 주 구분자당 이등분 한다는 뜻이고, axis.tickSubdivide( 9 )는 십등분 한다는 뜻이다.

# axis.tickSize([major[​[, minor], end]])

주 구분자, 하위 구분자, 종료 구분자 크기 get or set. 종료 구분자는 스케일의 입력 범위(domain)를 고려해서 결정된다. 그래서 구분선이라기보단 생성된 입력 범위 패스의 일부다. 종료 구분자는 처음과 끝 구분자의 곁에 있거나 덥어쓸 수도 있다. 종료 구분자 크기가 0이면 종료 구분자는 보이지 않는다. 예제를 보자.

axis.tickSize(6); // 주, 하위, 종료 구문자 모두 크기가 6.
axis.tickSize(6, 0); // 주, 하위 구분자는 6. 종료 구분자는 0.
axis.tickSize(6, 3, 0); // 주 구분자는 6, 하위는 3. 종료는 0.

# axis.tickPadding([padding])

Set or get the padding between ticks and tick labels. 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])

Set or get the tick value formatter for labels. If format is specified, sets the format to the specified function and returns the axis. 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.

Note: for log scales, the number of ticks cannot be customized; however, the number of tick labels can be customized via 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.