[d3] line chart 그리기

 개요

 d3.js를 이용해 Line Chart를 그리자

 D3

d3란 데이터를 시각적으로 표현하는 자바스크립트 라이브러리이다. 

d3 사이트에 들어가면 많은 예제가 있고 소스가 공개되어 있어 따라해볼 수 있습니다.

http://d3js.org/

 소스

- 스크립트

function drawLineChart(className,array_value,array_Kg, lineData_pre, lineData_ori){
    
    // define dimensions of graph
    var m = [80, 80, 80, 80]; // margins
    var w = 500 - m[1] - m[3];    // width
    var h = 300 - m[0] - m[2]; // height
    
    // x & y range
    var x = d3.scale.linear().domain([0, d3.max(array_Kg)]).range([0, w]);
    var y = d3.scale.linear().domain([d3.min(array_value), d3.max(array_value)]).range([h, 0]);
 
    var line = d3.svg.line()
    // assign the X function to plot our line as we wish
    .x(function(d) { 
        return x(d.x); 
    })
    .y(function(d) { 
        return y(d.y); 
    });
    
    var graph = d3.select("#"+className).append("svg:svg")
          .attr("width", w + m[1] + m[3])
          .attr("height", h + m[0] + m[2])
        .append("svg:g")
          .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
                
    // create yAxis
    var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true).orient("bottom");
    // Add the x-axis.
    graph.append("svg:g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + h + ")")
          .call(xAxis)
         .append("svg:text")
          .style("text-anchor","middle")
          .text("Kg");
 
 
    // create left yAxis
    var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");
    // Add the y-axis to the left
    graph.append("svg:g")
          .attr("class", "y axis")
          .attr("transform", "translate(-25,0)")
          .call(yAxisLeft);
    
    
    // Add the line by appending an svg:path element with the data line we created above
    // do this AFTER the axes above so that the line is above the tick-lines
    graph.append("svg:path").attr("d", line(lineData_pre)).attr("class","predict");
 
    graph.append("svg:path").attr("d", line(lineData_ori)).attr("class","origin");
}

- CSS

path {
    stroke-width: 1;
    fill: none;
}

/**
*    graph line color
*/
.predict{
    stroke:steelblue;
}
.origin{
    stroke:orange;
}

.axis {
  shape-rendering: crispEdges;
}

.x.axis line {
  stroke: lightgrey;
}

.x.axis .minor {
  stroke-opacity: .5;
}

.x.axis path {
  display: none;
}

.y.axis line, .y.axis path {
  fill: none;
  stroke: #000;
}

 코드 주석

1. var x, y : 제일 먼저 x&y 값 최소와 최대값을 측정하여 범위를 지정한다.

2. var line : 데이터에 따라 선을 그리기 위해 x좌표값과 y좌표값을 데이터에서 추출한다.

(아래 데이터에서는 Kg이 x축이고 L , a, b, E가 각각 Y의 값이되어 4개의 그래프를 그릴 수 있다)

3. var graph : className으로 지정된 ID를 가진 div를 선택해 그래프의 바탕을 그린다.

4. var xAxis, yAxis : 앞서 구한 x&y의 범위를 가지고 x축과 y축을 그린다.

(transform 옵션은 축의 위치가 되겠다)

5. graph.append("svg:path") 를 통해 line 함수로 추츨된 x y 좌표로 그래프의 선을 그린다.

 Data

origin
L a b E Kg 54.59 1.04 2.81 0.45 32.0 55.21 1.02 2.67 0.5 209.0 54.91 0.95 2.12 0.35 211.0 54.34 1.16 2.5 0.5 305.0 54.59 0.98 2.01 0.48 371.0 54.28 1.0 2.46 0.5 433.0 predict

L	a	b	E	Kg
54.60151220487879	1.0252971397578554	2.795865865602812	0.4396706013995714	32.0
55.20423477656047	1.0276815224269777	2.677189789380056	0.5050869193777713	209.0
54.886372825651264	0.9817967029175249	2.14964630901721	0.37113914211756	211.0
54.345702379657745	1.1554779418564196	2.4932708563150765	0.4939113237644091	305.0
54.54365183232861	1.0131970483846433	2.0631704414171836	0.5249999887597754	371.0
54.28097080527605	0.9984697223644753	2.460347682297995	0.5031537879399656	433.0

 결과