지난번까지 메인 그래프를 그릴 수있었습니다. 이번에는 X축 등 ​​그래프에 필요한 다른 요소를 묘사합니다.

X축

d3 기능을 사용하여 X 축을 쉽게 묘사할 수 있습니다.

1. 우선 X축의 묘사 영역용의 삽입물을 정의. Visual 클래스의 속성에 다음 코드를 추가합니다.

private xAxis: d3.Selection<d3.BaseType, any, any, any>;

2. 생성자 내에서 초기화. 루트 SVC에 g 요소를 추가합니다.

constructor(options: VisualConstructorOptions) {
    this.svg = d3.select<SVGElement, any>(<any> options.element)
        .append('svg');
    this.stackBarContainer = this.svg
        .append('g');
    this.xAxis = this.svg
        .append('g');
}

3. X축을 표시할 수 있도록 그래프 영역의 여백을 변경합니다.

let margin = { top: 0, bottom: 30, left: 0, right: 0 }

4. update 함수의 맨 아래에 다음 코드를 추가합니다.

transform 요소를 사용하여 표시 위치를 아래로 이동

d3.axisBottom에 정의 된 x 함수를 전달하여 X 축 만들기

let xAxis = g => g
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x).tickSizeOuter(0))
    .call(g => g.selectAll(".domain").remove());
this.xAxis.call(xAxis);

5. 커스텀 비주얼을 확인.

Y축

거의 X축과 같이 구현할 수 있습니다.

1. Y 축의 묘사 영역에 대한 삽입물을 정의합니다. Visual 클래스의 속성에 다음 코드를 추가합니다.

private yAxis: d3.Selection<d3.BaseType, any, any, any>;

2. 생성자 내에서 초기화. 루트 SVC에 g 요소를 추가합니다.

this.yAxis = this.svg
    .append('g');

3. Y축을 표시할 수 있도록 그래프 영역의 마진을 변경.

let margin = { top: 0, bottom: 30, left: 40, right: 0 }

4. update 함수의 맨 아래에 다음 코드를 추가합니다.

transform 요소를 사용하여 표시 위치를 왼쪽으로 이동

d3.axisLeft에 정의한 y 함수를 전달하여 Y 축 만들기

let yAxis = g => g
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(y).ticks(null, "s"))
    .call(g => g.selectAll(".domain").remove());
this.yAxis.call(yAxis);

5. 커스텀 비주얼을 확인.

범례

기본적인 사고 방식은 동일하지만, 범례는 보통 사각형이나 원 등과 문자열을 함께 표시하기 때문에 요소가 늘어납니다.


1. 범례 묘사 영역에 대한 삽입물을 정의. Visual 클래스의 속성에 다음 코드를 추가합니다.

private legend: d3.Selection<d3.BaseType, any, any, any>;

2. 생성자 내에서 초기화. 루트 SVC에 g 요소를 추가합니다.

this.legend = this.svg
    .append("g");

3. 범례를 표시할 수 있도록 그래프 영역의 마진을 변경.

let margin = { top: 0, bottom: 30, left: 40, right: 130 }

4. update 함수의 맨 아래에 다음 코드를 추가합니다.

circle 및 text 요소로 구성하기 위해 요소를 한 단계 추가

변환으로 화면 오른쪽에 표시

범례 순서와 그래프 순서가 반대이므로 reverse ()로 바꾸기

각 범례가 겹치지 않도록 data 함수 후에 20 픽셀씩 어긋나도록 transform 을 실행

let legend = svg => {
    let g = svg
        .attr("transform", `translate(${width - margin.right}, 0)`)
        .selectAll("g")
        .data(legends.reverse())
        .join("g")
        .attr("transform", (d, i) => `translate(0,${i * 20})`)

    g.call(g => g.selectAll("circle").remove());
    g.call(g => g.selectAll("text").remove());

    g.append("circle")
        .attr("cx", 20)
        .attr("cy", 10)
        .attr("r", 5)
        .attr("fill", d => color(d));

    g.append("text")
        .attr("x", 30)
        .attr("y", 9.5)
        .attr("dy", "0.35em")
        .text(d => d);
}
this.legend.call(legend);

5. 커스텀 비주얼을 확인.

요약

이번에는 메인 그래프 이외의 요소를 묘사했습니다. 잘 보이는 것처럼 보이지만 범례 문자열이 길어지거나 짧아지면 동적으로 대응할 수 없으므로 다음 번에는 제공된 Utility를 사용하여 동적으로 계산해 보겠습니다. 또 서식도 설정해 봅니다.

다음 기사로
목차 페이지로 돌아가기