Нажимаемые линии и круги с холстом HTML

Question

Я подумываю о создании приложения, где в некоторых точках отображается график, который отображает людей во времени и пространстве. Вертикальный доступ - это местоположение, горизонтальный доступ - это время, и каждый человек идентифицируется линией. В любой момент, когда человек делал что-то значимое, на их линии больше точки. Концептуально нажатие точки вызывает данные об этой определенной точке, но нажатие в любом месте на линии приводит к детализации этого человека. Гипотетически, когда вы наводите курсор на линию, линия должна менять цвет, а когда вы наводите курсор на точку, то точка должна менять цвет.

Я знаю, что я мог бы сделать это довольно легко со вспышкой, но мне было интересно, если в эти дни есть способ сделать это, используя только html и javascript. Является ли это возможным? (Совместимость не проблема, единственная машина, на которую я нацеливаюсь, - моя.)

Спасибо!

Answer 1

Вы можете сделать это с помощью холста, но, возможно, проще использовать SVG.

Поскольку SVG использует DOM, вы получаете встроенные методы обработки событий, таких как щелчок и т. Д., Вместо того, чтобы писать собственный код обработки, как вам нужно с холстом.

Существует несколько библиотек, которые упрощают работу с SVG и совместимы с несколькими браузерами, такие как библиотека dojox.gfx от Raphael и Dojo.

Answer 2

Вы можете создать точки, наложенные на div, так что вы можете легко обрабатывать клики и т. Д. Конечно, вам нужно будет упорядочить позиционирование довольно аккуратно. Однако выделение строки будет включать вычисление расстояния между линиями вручную и перерисовку.