Entj의 코딩일기

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

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() - 데이터 개수 만큼 태그가 부족할때, ..

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

ㅇ 아래에서 master(팀장) 이 해야할 부분 ㅇ 아래에서 팀원이 해야할 부분 *우선 깃협업을 할때 깃을 관리할 팀장(master) 과 팀원들이 구분 되어야 한다 . 함께 관리할 repository 를 생성한 사람이 master 계정을 관리하게 된다. 1. 팀원이 함께 관리할 Repository 를 마스터가 새로 생성 2. Repository name은 팀프로젝트명으로 해놓고, public 의 형태로 생성 reademe는 선택사항 (바로 선택하지 않는다 하더라도 나중에 다시 추가할 수 있기 때문) 3. repository 를 생성한후에 본인이 올리고 싶은 프로젝트 파일을 git에 master가 add 해 주어야 함 * 여기서 master는 master 계정에 바로 본인의 코드를 add 해도 되지만 다른..

board 생성 및 Contoller 세팅 보고 오기 SPRING#11-1 Controller 여러개 생성(Board) (tistory.com) SPRING#11-1 Controller 여러개 생성(Board) ㅇ 프로젝트에서 사용할 기술이 많이 나오기 때문에 집중해서 공부하기 Controller #프로젝트 생성해주기 #프로젝트 준비단계 1. pom.xml 에 lombok 처리 와 web.xml 에 한글처리 #CSS 생성해놓기 (언제해도 tjqud531531.tistory.com Member #MemberContoller 생성하기 ㅇ @Controller 클래스 위에 만들어주기 ㅇ @RequestMapping("member") 로 공통요청경로 빼주기 #컨트롤러 만들기 ①(member/join) 1. @R..

ㅇ 프로젝트에서 사용할 기술이 많이 나오기 때문에 집중해서 공부하기 Controller #프로젝트 생성해주기 #프로젝트 준비단계 1. pom.xml 에 lombok 처리 와 web.xml 에 한글처리 #CSS 생성해놓기 (언제해도 상관 NO) 1. webapp 아래에 css 폴더 생성 후 그 안에 style.css 파일 만들고 2. webapp / WEB-INF / spring / appServlet / servlet-contexxt.xml 에서 resources 설정해주기 () #DTO 만들기 (com.lec.ch07.dto 패키지)에 Member 만들기 1. 매개변수 있는 생성자함수, 매개변수 없는 생성자 함수 , tostring, getter, setter 전부 어노테이션 만들 것 **만약 tost..

ㅇ Weaving : Advice 와 target이 결합되어서 프록시 객체를 만드는 과정 ㅇ 방법은 XML을 이용하는 방법과 @Aspect 어노테이션 이용하는 방법이 있다. ㅇ XML 활용하는 방식을 SPRING#8 공통기능구현하기1 과 함께 이어서 보자 ㅇ 오늘 해볼 것은 @Aspect 어노테이션을 이용하는 방법 공통기능 구현하기 1을 보지 않은 사람들은 먼저 본 후에 2학습하기 SPRING #8 공통기능구현하기 1(AOP) (tistory.com) SPRING #8 공통기능구현하기 1(AOP) 1. 핵심기능을 구현하고 2. 공통기능을 구현한다. 기본적인 개념 1. pom.xml 에서 dependency 추가하기 2. Class 2개 생성해서 메소드 만들기 1) Student Class 만들기 (변수선..

1. 핵심기능을 구현하고 2. 공통기능을 구현한다. 3. 공통기능을 구현하는 방법에는 XML을 활용하는 방식과 어노테이션을 이용하는 방식이 있다 4. 본 페이지는 XML을 활용하여 공통기능을 구현해보고자 한다. 기본적인 개념 1. pom.xml 에서 dependency 추가하기 2. Class 2개 생성해서 메소드 만들기 1) Student Class 만들기 (변수선언) 2) Student Class 에 메인함수에서 호출될 핵심기능 생성해놓기 ( A기능 ) 3) Worker Class 만들기(변수선언) 4) Worder Class에 메인함수에서 호출될 핵심기능 생성해놓기(B기능) 3. META-INF 안에 CTX 생성 1) applicationCTX1.xml 에 Student형 bean , Worker ..