HTML изображение граф, который является интерактивным / кликабельным

Question

Я хочу отобразить график, аналогичный приведенному ниже.Мне бы хотелось, чтобы узлы (A, B, C, ...) можно было нажимать, и из этого я мог бы отобразить небольшое всплывающее меню, предоставляющее пользователю варианты действий, которые они хотят сделать.

IЯ знаю, что я мог бы отобразить что-то подобное с помощью canvas, но из моего понимания мне пришлось бы выяснить координаты для каждого узла (их может быть более 50), чтобы написать функции щелчка.

Япросто ищу направление для способа сделать это, либо с помощью стандартных html, css, js, либо с помощью библиотеки (если я использую библиотеку, мне понадобится граф для панорамирования и взаимодействия на мобильном телефоне).

Answer 1

Я бы сделал это с помощью холста.Вы наверняка знаете, где вы положили буквы.Всякий раз, когда вы помещаете букву, просто сохраняйте ее координаты и реализуйте функцию, которая сообщит вам, находится ли данная пара X, Y внутри прямоугольника данной буквы.Предполагая, что вы сохранили массив букв, где у вас есть члены startX, startY, endX, endY, вы можете сделать что-то вроде этого:

function isInRectangle(letter, x, y) {
    return ((x >= letter.startX) && (y >= letter.startY) && (x <= letter.endX) && (y <= letter.endY));
}

function getClickedLetter(letters, x, y) {
    for (var letter of letters) if (isInRectangle(letter, x, y)) return letter;
    //by default returns undefined
}

Answer 2

используйте html <svg> tag (вместо canvas), чтобы сделать это легко https://css -tricks.com / how-to-make-charts-with-svg / .Вы также можете использовать Vue / Angular, чтобы получить еще лучшие результаты (более простой код).