Javascript139 D3.js 데이터 업데이트, 선택자, 레이어구조의 중요성 D3.js 라이브러리를 쓰면 쓸수록 데이터 업데이트, 선택자, 레이어구조를 잡는것의 중요성에 대해 깨달아가고 있다.특히 최근에는 collapse 기능이 들어간 tree diagram을 만들기회가 있었는데,위 3가지를 능숙하게 다루어야 만들 수 있었다. 먼저 이벤트에 따라 데이터를 업데이트 하고 그에따라 enter, exit 선택자 함수를 이용하여 enter, update, exit의 함수를 설계한다.그리고 노드와 링크의 레이어 구조를 잡아서 화면에 나타내 준다.말로 설명해서 간단하지만 직접 처음부터 만들어야 하는 사람이 생각한다면3가지에 대한 제대로된 이해없이는 설계자체가 불가능하다. D3.js를 처음하는 분이라면 어느정도 함수를 공부하고조금 난이도 있는 시각화 결과물을 위의 3가지 관점에서 분석해 보는.. 2017. 6. 7. D3.js enter, update, exit 함수 D3.js를 하다보면 DOM 할당에 있어서 enter, update, exit 함수를 쓰는 것을 볼 수 있다.처음 본 함수를 접하다보면 이해가 안 될 수 있지만D3.js를 계속 사용하다보면 이해가 조금씩 되기 시작한다.본 함수에 대한 자세한 설명은 아래의 링크에 잘 설명되어 있다. http://www.programkr.com/blog/MYjMwADMwYT0.html 2017. 6. 5. 이전페이지로 돌아가게 하는 함수 홈페이지를 만들다보면 어떠한 이벤트 발생시 뒤의 페이지로 가게 하는 기능이 필요하다.이를 위해 javascript에서는 location.replace(/* url 주소 */) 라는 강제 페이지 이동 기능을 제공하고 있으며,그 안에 변수로 document.referrer를 넣으면 바로 뒤의 페이지로 이동하게 된다. 더 자세한 설명은 아래의 링크를 참조하면 좋다. https://stackoverflow.com/questions/18518795/how-to-reload-previous-page-with-javascript 2017. 6. 1. setInterval의 초반실행 방지 방법 이전에는 몰랐는데 jquery의 setInterval 함수가 초반에 먼저 실행되고,그 다음에 안의 함수를 실행시킨다는 것을 알게 되었다. 그래서 먼저 함수를 선실행 하려면 어떻게 해야 하는지 고민하게 되었다.원리는 간단했다. setInterval내에 들어가는 함수를 바깥의 함수로 선언하고,밭에다 한번 선언해주고 안해다 선언해주면 끝나는 문제였다. 이와같은 문제에 대한 질문과 해결책 샘플은 아래의 링크에 잘 나와있다. https://stackoverflow.com/questions/10563344/how-to-start-setinterval-loop-immediately 2017. 6. 1. jquery 이벤트를 확실히 발생시키는 방법 가끔 jquery를 사용하다가 이벤트를 선언했음에도 발생이 되지 않을때가 있다.이러한 경우는 페이지 내에 이벤트가 물려있는 버튼의 태그가 없었다가 생겨나는 등의 다양하고 복잡한 문제에 의해 발생하는데,이러한 문제를 해결하고 언제나 이벤트를 발생시켜 주려면,아래의 함수를 선언해주면 된다. $(document).on('/* 이벤트이름 */', /* 이벤트객체(ex> '#app') */ , function() { /* 내용 */ }) 이와같은 문제에 대한 질문과 해결책 샘플은 아래의 링크에 잘 나와있다. https://stackoverflow.com/questions/1525664/jquery-how-to-bind-onclick-event-to-dynamically-added-html-element 2017. 6. 1. bootstrap에서의 tab 전환 이벤트 받기 bootstrap의 tab을 사용시 tab이 전환할때의 이벤트를 받아야 할때가 있다.그때는 shown.bs.tab를 통해 본 이벤트를 캐치해주면 된다. 아래의 링크에 그에대한 설명이 잘 나와있다. https://stackoverflow.com/questions/20705905/bootstrap-3-jquery-event-for-active-tab-change modal도 그렇고 jquery에서 boostrap의 ui에 대한 이벤트 정의를 잘 해준거 같아서 매우 편리하다. 2017. 6. 1. jquery에서 레이어 바깥을 클릭시 해당 레이어가 사라지게 하는 방법 흔히 popup 버튼과 그에따른 레이어를 만들었을때,팝업 레이어의 바깥 쪽을 클릭하는 이벤트가 발생할시레이어가 사라지게 하는 기능을 구현해야될 때가 있다. 본 기능을 jquery로 구현하기위해 구글을 검색한 결과아래의 링크에서 간편한 방법이 나와있었다. http://poponyang.tistory.com/entry/jQuery-레이어-바깥-클릭할-때-레이어-사라지게-하는-방법 2017. 6. 1. node.js 에서 주의해야 할점 response.end() 로 값을 보낼때는 반드시 안의 파라메터가 string이어야 한다.그래야 오류가 나지 않는다.간단하지만 이것때문에 최근에 약간의 시간을 낭비했다. 그리고 참고로 string으로 보내기 싫으면 response.send()를 쓰면 된다. 2017. 5. 20. ajax에서 값을 넘겨줄때 주의해야 할점 최근 ajax에서 json값을 node.js로 넘겨줄 일이 있었다. 그런데 node.js에서 자꾸만 json으로 넘겨준 값이 배열로 찍히고 있었다.(이 문제로 인해 한참을 고생했다..) 알고보니 ajax에서 값을 넘겨줄때 string이 아닌 다른 값으로 넘겨줄 경우에 자기가 형변환을 하는 경우가 발생함을 알게 되었다. 그래서 ajax로 보내줄께 JSON.stringify() 함수를 통해 string으로 형변환을 해주어 보내주고,서버에서 JSON.parse를 통해 다시 json으로 변경해 주었다.그랬더니 제대로 작동됨을 알 수 있었다. 또 하나 주의할 점은 만약 ajax에서 dataType이란 속성에 json을 할당했다면,이는 넘겨주는 값 그리고 받는 값 모두 json 형식으로 해줘야 한다는 뜻이다.(만약.. 2017. 5. 19. 이전 1 ··· 9 10 11 12 13 14 15 16 다음