본문 바로가기

전체 글91

select와 selectAll 문서요소 그룹핑 d3 라이브러리르 사용하면서 가장 많이 사용하는 메소드는 바로 select다. 데이터를 바인딩 하거나 문서 요소를 조작하려면 먼저 요소를 찾아야 하기 때문이다. select 선택된 문서요소를 원소로 하는 한 개의 group 배열을 원소로 하는 배열을 반환한다. const selection = d3.select('div'); selectAll 선택된 모든 문서요소를 원소로 하는 한 개의 group 배열을 원소로 하는 배열을 반환한다. const selection = d3.selectAll('div'); select 이후 data와 연동해서 많이 사용한다. 2018. 10. 16.
D3란 무엇인가? D3.js란? Data Drivened Document'의 약자(3개의 D로 시작하기 때문) HTML, SVG(Scalable Vector Graphics), CSS를 사용해 데이터를 시각적인 결과물로 나타낸다. 간단히 요약하자면 차트 형태나 그래프, 트리 형태 등으로 데이터를 화려하고, 예쁘게 표현한다. 기본적인 사용방법은 어느 js 라이브러리(jquery 등)와 비슷한데 메서드 체이닝 방식이 기본이다. 예제 node.append('text') .attr('dx', -18) .attr('dy', 8) .style('font-family', 'overwatch') .style('font-size', '18px') .text(d => d.name); 요구사항 인터넷 익스플로러8 이하를 제외한 모든 웹 브라우저 2018. 10. 16.
Git 지저분한 commit 메시지를 정리하자! 로컬에서 개발을 열심히 하면서 commit을 수도 없이 하게 된다. 하지만 로컬 commit은 급하게 작성하는 경우가 많다. 이래서는 야레야레~ commit 메시지는 Git 이력관리에 매우 중요! 이 상태로 개발 브랜치나 배포 브랜치에 merge 시켜버리면 히스토리 관리가 힘들어진다. 그러므로 원격지에 push 전에 commit 메시지를 예쁘게 할 필요가 있다. 명령어는 간단하다. 내가 예쁘게 만들 commit 메시지 개수만 알면 된다. 만약 4개라면, 최근 기준으로 4개를 가져온다. git rebase -i HEAD~4 위의 명령어를 입력하면 git log로 볼 수 있는 commit 목록의 역순으로 가져온다.(맨 위의 커밋이 가장 오래된 커밋) 밑에 사진은 실제 rebase 작업을 한 저의 Git 커맨.. 2018. 9. 13.
Override 조심! 조심! 조심! Override는 예상치 못한 동작을 야기한다. ExtJS는 사용자에게 많은 확장성을 제공해준다. 하지만 무분별하게 사용 할 경우 어디에서 문제가 발생하는지 찾기 힘들게 만든다. 특히나 override!! override를 하는 경우에는 override 하고자 하는 메소드를 꼭! 참고해서 작성 해야한다. override 메소드가 내부적으로 처리하는 필수 로직이 있는데 무작정 덮어써버리면 해당 로직이 사라지게 되고 이상동작 증상이 발견된다. Template Method를 사용하게 될 경우 주의해야 한다. 상위 함수를 꼭 호출 해야하는 경우에는 override 함수 내부에서 컴포넌트.prototype.[Template Method].apply(this); 를 호출하도록! 2018. 9. 7.
아직 그려지지 않는 컴포넌트에 이벤트 핸들러 추가하기 ExtJS에서 컴포넌트에 이벤트를 추가하는 방법은 여러가지가 존재한다. 생성 시에 listeners에 추가하기 addEventListener를 이용해서 추가하기 .on 함수 .mon 함수 기타 등등 하지만 생성 시에 추가하지 않고 나중에 추가하려고 하는데 아직 화면상에 렌더링이 되지 않았다면 on, addEventListener, mon 함수를 사용해서 추가 할 수 없다. 어떻게 해야할까? 컴포넌트.listeners = [{ click: function, select: function, }, 컴포넌트.listeners ]위의 방식대로 하면 기존 select와 click 이벤트는 유지한 채 추가된다. (덮어쓰기가 아님) 2018. 9. 5.
Dataview 선택이 풀려버리는 증상 Dataview에서 아이템 선택이 풀려버린다? Dataview에서 아이템을 클릭하다보면 어느 순간 selection이 풀려있는 아이템을 볼 수 있다. 코드 로직에서 잘못됐나 살펴봤지만 문제점을 찾지 못하던 중 Dataview의 container 관련 이벤트를 핸들링 해보니...여기가 문제였다. 무엇이 문제였을까? 사용자는 Dataview의 아이템을 클릭하길 원했다. 하지만 간혹 Dataview의 container가 클릭되는 현상이 발생한다. 이렇게 되면 클릭은 했는데 Dataview 아이템은 선택이 안되어있는 버그처럼 보이는 증상이 발생한다. 해결책은 간단하다. containerclick 또는 beforecontainerclick 이벤트에서 return false; container 클릭 시에는 무시 해.. 2018. 9. 4.

티스토리툴바