使用Javascript（JQuery）绘制交互式（dom元素/对象）点

Question

我正在尝试创建一个网页，我想在其中绘制可以与鼠标事件关联的点（Jquery）。 所以，我想我希望它们是dom对象，而不是只想画它们。 （请建议我们是否可以使用html5绘制并仍然将它们视为dom元素）

基本上我有一个带有x，y坐标的文本文件，我想绘制那些但想要将Jquery事件与它们关联起来。例如：在左键单击它们时会出现一个图形，或者右键单击它们会显示一个菜单，具体取决于我单击的节点。

Answer 1

嗯，有几种方法。

你可以使用这些点来获取你的坐标并在DOM上创建绝对定位的元素。使用jQuery，您可以设置“顶部”和“左侧”点来定位它们。这个方法对您来说可能是最简单的，因为jQuery可以轻松应用点击事件。

您可以使用HTML5画布并使用文件中的坐标在其上绘制形状。使用此方法，您可能需要编写自己的事件库或使用已编写的库（如kinetic.js）。与第一种方法一样，使用DOM对象和CSS的样式也会变得不那么动态和广泛。

Answer 2

Imho，用线条和点编写DOM元素是一种非常愚蠢的方法。例如，你将如何制作一条圆线 - 你可以创建带有边框CSS样式的对角线但是......嗯 - 有很多选择！另一种方法可能是Highslide。

jQueryUI的-可视化

jQuery top5图表工具

http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/

Demo

Dojo Toolkit

由于您出于某种原因使用dojo标记了此内容，请查看此博客条目;
http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/

2dChart Demo

Read about Scrolling / Zooming here

Zoom Demo

这是来自apache用户的一个不错的小introduction slideshow