Entj의 코딩일기

d3를 통해 다양한 그래프를 그릴 수 있다는 사실은 앞선 포스팅에서 확인했었다. 앞에선 기본 막대그래프를 그려보았다면, 이번 포스팅에선 산포도 그래프를 그려볼 에정이다 * 좌표계(도표)를 이용해 좌표상의 점들을 표시함으로써 두 개 변수간의 관계를 나타내는 그래프 방법* 1. D3.js를 밖에 플러그인 해준다 2. HTML body - 화면에 그래프를 그리기 위해선 그래프가 들어갈 공간을 html에서 확보해주어야 한다. D3.js 산포도 그래프 3. D3.js 산포도 그래프

지금까지 생성한 bar chart에서 각각의 차트를 클릭했을때 이벤트가 걸릴 수 있도록 해볼 것. 그 중 rect를 선택하면 해당되는 rect 값과 동일한 값을 가진 그리드의 행이 반전처리 될 수 있도록 하는 이벤트 만들예정 복사 할 수 있는 코드는 해당 포스팅의 맨 아래에 한번에 게시 [필요사항] 1) rect를 클릭했을때 들어오는 값을 받아올 변수 2) 그리드 행에 해당되는 값을 넣어 놓을 변수 3) rect를 클릭했을때 rect값과 그리드의 행의 값이 동일할때 이벤트 발생 1. 그리드의 rowid 받아오기 - jqGrid는 그리드가 그려질 때 row(행)별 고유의 id가 자동으로 생성됨. 이 아이디를 활용을 한다면 행별 색상 반전을 시킬 수 있음 - 앞에서 그리드를 만들기 위해 setGrid()라는..

이어서 chart에 tooltip을 그리는 방법에 대해 포스팅 해보도록 하겠습니다 mouseover/mousemove/mouseout 함수를 사용하여 생성할 예정입니다 기본 차트 그리는 방법은 아래 포스팅에서 확인 d3.js 사용법 - ② bar chart 그리기 (tistory.com) d3.js 사용법 - ② bar chart 그리기 d3.js 를 사용하여 막대그래프(bar chart)를 그려보기 전에 , 기초 세팅을 해야함 기초 세팅은 아래 포스팅에서 확인가능 d3.js 사용법 - ① 개념 및 초기세팅 (tistory.com) d3.js 사용법 - ① 개념 및 초기 tjqud531531.tistory.com 앞선 포스팅에서 차트를 그리기 위해 drawChart1(getData,type)이라는 함수를..

d3.js를 이용하여 막대 그래프를 그릴 때 그래프가 아래서부터 그려지는 것이 아닌 위에서부터 그려지는 경우가 있다 이 부분을 해결하기 위해선 (전체 높이-넣고자 하는 데이터 값) 계산을 해야 하는데 이 부분이 생각보다 헷갈려 다시한번 정리해보고자 한다 d3.select("svg") .selectAll("rect") .data([15,50,22,8,100,10]) .enter().append("rect") .attr("width",10) .attr("height",function(d){return d;}) .style("opacity", .25) .attr("x",function(d,i){return i*10;}); SVG는 우리가 지정한 곳을 기준으로 오른쪽, 아래쪽으로 사각형을 그림 위 코드를 실행시..

d3.js 를 사용하여 막대그래프(bar chart)를 그려보기 전에 , 기초 세팅을 해야함 기초 세팅은 아래 포스팅에서 확인가능 d3.js 사용법 - ① 개념 및 초기세팅 (tistory.com) d3.js 사용법 - ① 개념 및 초기세팅 Data - Driven Documents. JavaScript 데이터 중심의 문서 (Data - Driven Documents)의 약자로 자바스크립트 기반의 라이브러리 언어 웹브라우저 상에서 동적인 정보시각화를 구현하기 위한 자바스크립트 라이 tjqud531531.tistory.com 그리드와 차트를 그릴때 사용한 데이터 1. 데이터 세팅 차트를 불러오기전에 Jgrid 와 마찬가지고 데이터를 먼저 불러와야한다. ajax를 통해 컨트롤러에서 json데이터를 불러오고,..

Data - Driven Documents. JavaScript 데이터 중심의 문서 (Data - Driven Documents)의 약자로 자바스크립트 기반의 라이브러리 언어 웹브라우저 상에서 동적인 정보시각화를 구현하기 위한 자바스크립트 라이브러리 사용자가 입력한 시각화 규칙을 바탕으로 데이터를 반영해 시각화 결과물을 생성 D3 메소드 대부분의 D3메서드는 결과 값으로 선택물의 참조를 반환하므로, 메서드를 체인으로 연결할 때는 순서가 중요. d3.select() - 현재 문서에서 특정 태그 하나를 선택하는 메서드 d3.selectAll() - 특정 태그 전체를 선택 .data() - 참조 연결할 데이터를 가져옴 (선택된 태그에 대한 데이터 매칭) .enter() - 데이터 개수 만큼 태그가 부족할때, ..