프로그래밍/SVG

SVG로 만든 기본 bar chart (2) - d3.js 이용

쇠주는참이슬 2012. 3. 21. 14:03
위에 소스와 별 다르진 않지만 animate 속성을 추가해줬다.
굵게 처리된 부분을 확인하면 된다. 문제는 크롬과 파이어폭스에서만 지원된다는것.
IE9 은 안된다.. 망할... PC용 사파리도 안됨.. 모바일은 되려나??
개발자 도구에서 보면 아래와같이 rect 태그에 animate 속성이 추가된 것을 볼 수 있다.





<!DOCTYPE HTML>
<html>
    
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="d3.v2.js"></script>
        <style>
            .chart {
                margin-left:42px;
                font: 10px"Comic Sans MS", cursive;
                shape-rendering:crispEdges;
            }
            .chart div {
                background-colkr:steelblue;
                text-align:right;
                padding:3px;
                margin:1px;
                color:white;
            }
            .chart rect {
                stroke:white;
                fill:steelblue;
            }
            .chart text {
                fill:white;
            }
        </style>
        <title>무제 문서</title>
    </head>
    
    <body>
        <div id="body">
            <div id="content">
                <script>
                    var data = [5, 1, 3, 6, 7, 8];

                    var chart = d3.select("body").append("svg").attr("class", "chart").attr("width", 420).attr("height", 20 * data.length);


                    var x = d3.scale.linear() // 막대형 차트를
                    .domain([0, d3.max(data)]).range([0, 420]); // svg로 그리려는 영역이 최소 0에서 최대 420이다.
                    chart.selectAll("rect") // 윗부분에서 chart 
                    .data(data).enter().append("rect") // rect를 추가해준다.
                    .attr("y", function (d, i) {
                        return i * 20;
                    }).attr("width", x).attr("height", 20).append("animate").attr("attributeType", "Transform").attr("attributeName", "width").attr("from", "0").attr("to", x).attr("dur", "1s");


                    var y = d3.scale.ordinal() // 막대차트에 값을 넣는다.
                    .domain(data).rangeBands([0, 120]);
                    chart.selectAll("rect").data(data).enter().append("rect").attr("y", y).attr("width", x).attr("height", y.rangeBand());


                    chart.selectAll("text") // 값표시
                    .data(data).enter().append("text").attr("x", x).attr("y", function (d) {
                        return y(d) + y.rangeBand() / 2;
                    }).attr("dx", -3) // padding-right
                    .attr("dy", ".35em") // vertical-align: middle
                    .attr("text-anchor", "end") // text-align: right
                    .text(String);
                </script>
            </div>
        </div>
    </body>

</html>