프로그래밍/SVG

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

쇠주는참이슬 2012. 3. 21. 13:40


예쁘지 아니한가?
애니메이션효과는 다음장에서 다루도록 합시다.

직접 한번 해보고. 스타일은 각자 맘에 드는형태로 해보아요~

d3.js 를 사용했습니다. http://mbostock.github.com/d3/ 


<!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);


                    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>