문어발식건설회사의머릿돌

x축과 눈금을 그리기 위해서 알아야할 D3 메서드는 scaleLinear(), axisBottom() 입니다. scaleLinear()는 숫자로 표현된 선형으로 된 눈금을 생성합니다. .domain() 과 .range()로 출력 범위를 정해줍니다. var xScale = d3.scaleLinear() .domain([0,500]) .range([0,500]) 현재 가로막대그래프가 500이하의 값들로 이뤄져있기에 .domain([0,500])으로 0~500 사이의 값을 데이터의 범위로 설정합니다. range()는 domain을 표시하는 눈금의 범위입니다. 그리고 range([0,500])으로 1:1로 대응하게 출력합니다. axisBottom()은 그래프 아래에 축을 넣을 때 사용하는 메서드입니다. 축을 위..

가로막대 그래프를 그리면서 기본적인 프로세스를 익혀본다. 1. 먼저 가로형 그래프가 표시될 HTML 파일(test.html)을 준비한다. 가로형 막대그래프 //svg 영역 지정 1) 준비된 HTML파일에 script 태그를 이용하여 d3.js를 호출한다. d3.js를 서버에서 직접 받아 사용함으로 d3객체를 모두 사용할 수 있다. 2) body에 svg 태그를 사용해 그래프가 나타날 영역을 지정한다. 이후 사용할 d3 객체에서 인식을 위해 아이디를 지정해 준다. 2. 그래프를 그리기 위한 데이터 처리를 위한 자바스크립트 파일(manual.js)을 준비한다. var dataSet = [400,200,90,190,240]; d3.select("#myGraph") //svg 요소 선택 .append("rect..