[d3] line chart 그리기

Posted by 백창
2015. 3. 31. 21:16 개발/Java script
반응형


 개요


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



 D3


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


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


http://d3js.org/



 소스


- 스크립트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
function drawLineChart(className,array_value,array_Kg, lineData_pre, lineData_ori){
    
    // define dimensions of graph
    var m = [80808080]; // 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");
}
cs


- CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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;
}
cs




 코드 주석


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

LabEKg
54.601512204878791.02529713975785542.7958658656028120.439670601399571432.0
55.204234776560471.02768152242697772.6771897893800560.5050869193777713209.0
54.8863728256512640.98179670291752492.149646309017210.37113914211756211.0
54.3457023796577451.15547794185641962.49327085631507650.4939113237644091305.0
54.543651832328611.01319704838464332.06317044141718360.5249999887597754371.0
54.280970805276050.99846972236447532.4603476822979950.5031537879399656433.0



 결과



반응형

'개발 > Java script' 카테고리의 다른 글

정규식을 이용해 숫자만 추출  (2) 2016.06.24
배열 특정 값 지우기  (0) 2015.12.14