2D交互式Javascript网格

Question

我想使用2D XY网格收集数据，其中每个网格轴代表不同的数量。基本上我想记录用户在网格中点击的点。

是否可以在网页中嵌入类似内容？我可以找到很多用于绘制XY数据的图表，但没有一个允许交互并从用户收集数据。

任何帮助/建议，将不胜感激。

大卫

Answer 1

JavaScript允许您为您的文档中的任何HTML对象（不只是因为HTML5）注册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 ... 
});