[D3.js] 막대 그래프 갱신, 트랜지션(trasition)

지금까지 정적인 테이터를 가지고 시각화를 하였다. 이제는 시각화에 변화를 통해 모션을 통해 트랜지션을 사용하여 시간에 따른 처리를 해보자

 

먼저 막대차트에 척도를 적용해보자.

 var xScale = d3.scaleBand()
                        .domain(d3.range(dataset.length))
                        .rangeRound([0, w])
                        .paddingInner(0.05);
        //rangeRoundd[0,w]는 0에서 시작해서 w로 끝나는 대역들을 계산해서 그 조각들을 치역으로 지정 

 

 

위 문구를 클릭하면 갱신된 값으로 시각화가 바뀐다. 이번에 이 변화에 트랜지션을 적용해 보고자 한다. D3에서 트랜지션은 .transition 만 추가하면 실행된다. 여기서 애니메이션의 기본 함수만 살펴보자.

 

transition() : d3는 시간 개념을 도입한다. attr()구문에 애니메이션을 적용

duration() : attr()이 변하는 기본값을 사용자가 정의할 수 있다. duration(1000) 은 1초이다.

ease() : 모션의 변동 비율이 일정하지 않고 가변적으로 사용할 때 사용, ()안에 bounce, cirlce 등의 내장함수를 넣어 적용 

delay : ease()와 다르게 트랜지션 시작 지점을 지정하여 밀리초로 정적인 값을 줄 수 있다. 

 

위의 4가지 정도의 트랜지션을 사용하여 아름다운 변화를 주었다. 그리고 위의 코드에서 데이터를 임의로 준 것이 아니라 랜덤한 값으로 줄 것이다. 데이터 변경은 후의 코드를 참조하자.

 

이제 마지막으로 하나만 갱신하면 된다. 혹시 해당 차트에서 데이터의 값이 25 이상인 값을 확인해 봤는가?? 우리는 새로운 데이터 값을 추가할 때마다, 막대가 너무 길거나 짧지 않도록 척도도 다시 갱신하야 한다.

 

척도는 y값만 갱신하면 되기 떄문에, yScale 변수를 새로 정의해준다. 치역을 저장하는 range()는 차트 크기가 변하지 않아 고정값이 들어있다. 새로운 데이터 셋을 생성하고 나면 domain()에서 척도의 정의역을 갱신해야 한다. 

yScale.domain([0, d3.max(dataset)]);

이 한줄을 이용하여 dataset의 최대값을 사용하여 정의역 상한선의 값을 지정하도록 한다. 

 

여기까지 진행한 전체 코드와 결과를 확인해보자.

 

트랜지션의 값들을 변경하여 원하는 시각화를 시도해보고 데이터의 최대값 및 변화를 마음대로 조절하여도 제대로 시각화가 이루어지는지 확인하면 좋을 것 같다.

 

d3.select('p').on("click", function () {
        
            var len = dataset.length;
            dataset = [];
            var yMax = 200;
            for (var i = 0; i < len; i++) {
                var newnum = Math.floor(Math.random() * yMax);
                dataset.push(newnum);
            }
 
            yScale.domain([0, d3.max(dataset)]);
            //척도를 갱신하여 y축의 최대값에 따라 차트를 그리도록 한다.,
            //dataset의 최대값을 이용해서 yscal 정의역 상한값을 지정한다.
 
            //클릭시, 데이터를 다른걸로 뒤집어쓴다.
            svg.selectAll('rect').data(dataset).transition().delay(function (i, d) {
                return i / dataset.length * 200;//딜레이가 가면 갈수록 더 지연되도록 함.
            }).duration(3000).ease(d3.easeBounceOut)
            .attr('y', function (d) {
                return h - yScale(d);
            })
            .attr("height", function (d) {
                return yScale(d);
            })
            .attr('fill', function (d) {
                return 'rgb(0,0,' + Math.round(d * 10) + ')';
            });
            //transtion을 통해 간단한 애니메이션 가능!!,duration은 지속시간
            //ease는 모션 변동 비율을 나타내면 위와같이 사용하고 항상 transition이 적용될 attr구문 사이에서 정의한다.
            //delay는 보통 duration전에 쓰며 지연을 의미, 여기서는 1초 후에 다음행동을 시작함 여기서는 텍스트가 먼저 변경되고 1초후 차트가 변경된다.
            //function을 사용하여 데이터의 색인값에 따라 갈수록 더 느려지게 조절함
            svg.selectAll('text').data(dataset).transition().delay(function (i, d) {
                return i /dataset.length * 200;
            }).duration(3000).ease(d3.easeBounce)
                .text(function (d) {
                    return d;
                })
            .attr('x', function (d, i) {
                return xScale(i) + xScale.bandwidth() / 2;
            })
            .attr('y', function (d) {
                return h - yScale(d) + 14;
            })
            .attr('class', 'ss');
            // 클릭시 위의 내용으로 전부 바뀐다, 
        })