2D 대화 형 자바 스크립트 그리드

Question

각 그리드 축이 다른 양을 나타내는 2D XY 그리드를 사용하여 데이터를 수집하고 싶습니다. 기본적으로 사용자가 그리드 내에서 클릭하는 지점을 기록하고 싶습니다.

웹 페이지에 이와 같은 내용을 삽입 할 수 있습니까? XY 데이터를 플롯하기위한 차트를 많이 찾을 수 있지만 상호 작용을 허용하고 사용자로부터 데이터를 수집하는 차트는 없습니다.

도움이나 제안을 보내 주시면 감사하겠습니다.

데이비드

Answer 1

자바 스크립트는 (뿐만 아니라 HTML5부터) 문서에있는 HTML 개체에 대한 event handlers을 등록 할 수 있습니다. 클릭 이벤트 핸들러는 클릭이 발생한 곳의 좌표가 포함 된 MouseEvent을 받게됩니다. 그런 다음이 좌표를 사용자 입력으로 사용하여 필요한 모든 방식으로 기록 할 수 있습니다.

// find your element by its ID propery 
var element = document.getElementById('id_of_your_grid');  
// add an event listener to it 
element.addEventListener('click', function(event) { 
     var x = event.clientX; 
     var y = event.clientY; 
     // your code ... 
});