Entj의 코딩일기

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

개발을 하다보면 어떤 파라미터값을 받아와 화면에 뿌리고 싶을때가 있다. 그럴때 보통 혹은 를 많이 사용한다. 오늘은 이 두가지의 사용법이외의 div를 사용한 기능을 소개하려고 한다. div 편집 기능이라고 생각해주면 쉽다 내가 input이나 textarea를 사용하지 않은 이유는 불러오는 파라미터값에 이미지를 붙이고 싶었고, 글자 정렬을 할때 박스의 맨 상단에 값을 불러오고 싶었기 때문이다 1) Input을 사용할경우 이미지를 불러올 순 있지만, input 높이를 크게 잡으면 글자도 가운데 정렬로 배치가 되버린다 2) 글자를 상단에 올리기 위해 를 사용하게 되면 이미지를 삽입할 수가 없게 되는 단점이 있다. 따라서 이미지를 불러오되, 글자의 정렬을 좀 더 편하게 만들기 위해 contenteditable=..

여기서 부모 좌표 노드란 특정 노드의 기준 좌표가 되는 노드를 말함. 이에 따라 자식 노드의 위치는 부모 좌표 노드에 영향을 받게됨 * 일반 프로그래밍에서의 좌표와 자바스크립트 좌표는 대부분 비슷하지만 좌표의 기준이 되는 부모 좌표 노드를 찾는 방법은 완전히 다름 * 사용법 | $대상.offsetParent() 1. 일반 프로그래밍에서의 부모 좌표 노드 일반 프로그래밍의 경우 노드를 감싸고 있는 노드가 부모가 되며 이 부모를 기준으로 위치를 잡음 즉 부모의 위치가 움직이면 내부에 들어 있는 자식 요소도 같이 움직임 // 일반 프로그래밍에서의 부모 좌표 노드 예시

자바스크립트의 객체는 크게 내장객체, 브라우저객체모델, 문서객체모델(DOM)으로 나눌 수 있음 1 내장객체 자바스크립트 엔진에 내장되어 있어 필요한 경우에 생성해서 사용할 수 있음 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등이 있음 가령 오늘의 날짜를 알고 싶다면 Date 객체를 생성하여 오늘 날짜를 알려주는 메서드 getDate()를 사용하면됨 2. 브라우저객체모델 브라우저 객체 모델(BOM)은 브라우저에 계층 구조로 내장되어 있는 객체를 말함 브라우저 객체로 window, screen, location, history, navigator 객체 등이 있으며 브라우저 (wndow)는 document와 location 객체의 상위 객체임 예를 들어 자바스크립트를 이용..

이어서 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 를 사용하여 막대그래프(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() - 데이터 개수 만큼 태그가 부족할때, ..

JqGrid를 사용하기 위해선 우선 관련 라이브러리를 다운로드 받아 js 파일을 연결 시켜야한다 이 과정을 하지 않은 사람들은 이전 포스팅 먼저 진행하면 된다 JqGrid 사용법 - ① 환경설정 및 기본세팅 (tistory.com) JqGrid 사용법 - ① 환경설정 및 기본세팅 JqGrid란? jqGrid는 jQuery 라이브러리를 이용한 Grid Plugin 이다 웹에서 테이블 형식의 데이터를 표시하고 조작을 위한 Ajax 기반 자바스크립트 컨트롤러 기본적으로 jQuery-UI를 이용한다 JqGrid를 사용하 tjqud531531.tistory.com 그리드와 차트를 그릴때 사용한 데이터 JqGrid 기본 사용법 1. 파일 연결시키기 2. body에 grid가 들어갈 공간을 만들어준다 *table에 ..

ㅇ AJAX 기본 문법에 대해 익히고 get, post, ajax 의 사용법에 대해 익히기 기본문법 ㅇ ajax 의 기본 함수들 get , post, ajax [사용 방법 ] ㅇ $.get(URL, callback); ㅇ $.post(URL, {파라미터이름:전달파라미터값, callback); ㅇ $.ajax({/* $.ajax(json형식으로 option 설정) ex) $.ajax({url:'', type:'get', data:~ , success:function(data,status){} }); 1. url : 요청 자원(서버)를 호출, 일반적으로 호출된 자원에서 json형식으로 데이터 return 해준다 2. type : 요청처리방식 3. data: 요청시, 함께 전달되는 데이터 ex. $(‘form..

ㅇ우리가 로직을 짠 결과물이 크롬에선 잘 나타날지 모르겠지만, 고객들이 사용하는 인터넷은 다를 수 있음. ㅇ따라서 우리가 원하는 모양대로 혹은 사용자가 원하는 대로 화면에 나타나길 바랄땐, jquery의 ui에 가서 소스를 긁어오 면 됨 datepicker ㅇ 우리가 일반적으로 쓰는 input type의 date 형태는 크롬에서만 잘 먹힐때가 있음. ㅇ 따라서 다른 인터넷을 사용하는 고객이 우리가 만든 홈페이지에 들어가면 date 형태가 제대로 안 뜰 수가 있음 ㅇ jquery의 ui 소스를 긁어와서 데이트 형태를 만들어주면 어느 브라우저에서나 먹힐 수 있는 형태로 데이트를 사용할 수 있음 ㅇ http://www.jquery.com - ui - datapicker - veiwsource에서 긁어오기 ㅇ ..