Отображение нескольких областей на интерактивной карте (SVG, HTML, CSS, JS)
Вложений: 1
Приветствую. Сразу сообщу, что я - дилетант в области JS.
Есть интерактивная карта SVG на HTML-странице. Так же присутствует таблица. При наведении на определенную строку, она подсвечивается определенным цветом, этим же цветом подсвечивается и область на карте, которая соответствует строке в таблице. Скрипт работает только по принципу: одна строка - одна область. Задача. Необходимо сделать так, что бы при наведении на строку могли подсвечиваться несколько областей на карте. Скрипт: <script type="text/javascript"> // Определим свои функции добавления/удаления класса, так как те, что в jQuery не работают для SVG jQuery.fn.myAddClass = function (classTitle) { return this.each(function() { var oldClass = jQuery(this).attr("class"); oldClass = oldClass ? oldClass : ''; jQuery(this).attr("class", (oldClass+" "+classTitle).trim()); }); } jQuery.fn.myRemoveClass = function (classTitle) { return this.each(function() { var oldClass = jQuery(this).attr("class"); var startpos = oldClass.indexOf(classTitle); var endpos = startpos + classTitle.length; var newClass = oldClass.substring(0, startpos).trim() + " " + oldClass.substring(endpos).trim(); if (!newClass.trim()) jQuery(this).removeAttr("class"); else jQuery(this).attr("class", newClass.trim()); }); } // Логика взаимодействия карты и таблицы $(window).load(function () { // Получаем доступ к SVG DOM var svgobject = document.getElementById('imap'); if ('contentDocument' in svgobject) { var svgdom = jQuery(svgobject.contentDocument); // Устанавливаем соответствующим фигурам на карте, соответствующие классы (по таблице) $("#data tr").each (function (index) { var id = $(this).attr("id").substring(1); var classes = $(this).attr("class"); $("#map #r"+id, svgdom).myAddClass(classes); }); // Подсвечиваем регион на карте при наведении мыши на соотв. строку таблицы. $("#data tr").hover( function () { var id = $(this).attr("id").substring(1); $("#map #r"+id, svgdom).myAddClass("highlight"); }, function () { var id = $(this).attr("id").substring(1); $("#map #r"+id, svgdom).myRemoveClass("highlight"); } ); // Подсвечиваем строку в таблице при наведении мыши на соотв. регион на карте $("#map polygon", svgdom).add($("#map circle", svgdom)).add($("#map path", svgdom)).hover( function () { var id = $(this).attr("id").substring(1); $("#data #d"+id).addClass("highlight"); }, function () { var id = $(this).attr("id").substring(1); $("#data #d"+id).removeClass("highlight"); } ); } }); </script> Таблица: <table id="data"> <tr id="d1" bgcolor="#000000"> <td>1</td> </tr> <tr id="#"> <td></td> </tr> <tr id="d2" class="orange"> <td>2</td> </tr> <tr id="#" class="red"> <td></td> </tr> <tr id="d3" class="purple"> <td>3</td> </tr> <tr id="d4" class="green"> <td>4</td> </tr> <tr id="d5" class="orange"> <td>1+2</td> </tr> <tr id="d6" class="red"> <td>2+4</td> </tr> <tr id="d7" class="orange"> <td>1+2+3+4</td> </tr> </table> Карта svg: <path id="r1" d="m 184.31777,877.17469 -7.88283,-6.20564 v -35.89204 l 27.00289,-1.17404 36.56292,3.18668 0.67088,7.37967 -3.18668,9.05687 4.69616,21.46814 -47.46471,3.52211z"></path> <path id="r2" d="m 245.18111,874.99433 8.10732,28.23148 -16.36623,11.14801 -27.98861,24.43074 -21.34725,-9.96205 -5.6926,-5.21822 -2.60911,-10.19924 -3.32068,-4.50664 5.6926,-11.85959 1.66034,-10.19924 3.79506,-4.03225 0.20582,-5.65264 10.39863,1.34175 z"></path> <path id="r3" d="m 182.31777,877.17469 -0.20582,5.65264 -3.79506,4.03225 -1.66034,10.19924 -5.6926,11.85959 -6.08904,-0.54784 -9.89547,9.05687 -6.87652,-0.33544 -14.25618,3.3544 -3.3544,-19.79094 11.06951,-15.2625 15.43023,1.67719 14.4239,-8.05055 z"></path> <path id="r4" d="m 185.31777,877.17469 -10.90179,1.84491 -14.4239,8.05055 -15.43023,-1.67719 -7.21195,-6.37336 -22.8099,-8.38599 10.06319,-6.54107 11.74039,-1.50948 3.18668,-4.02528 0.67088,-4.52843 24.99025,-25.66113 12.24355,6.70879 v 35.89204 z"></path> Все завязано на уникальный id. Понимаю, что надо привязаться к классам, но не понимаю как это сделать. Заранее благодарен за помощь! |
Ivanizukhty,
<td data-id="1,2" >1+2</td> |
svg hover from dataset
Ivanizukhty,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> svg { border: 1px solid red; } path.hover { opacity: .2; } [data-area].hover { border: 1px solid red; } </style> </head> <body> <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path id="r1" d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="rgba(255, 0, 0, 1.0)" class="area" /> <path id="r2" d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="rgba(0, 100, 0, 1.0)" class="area" /> <path id="r3" d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="rgba(255, 20, 147, 1.0)" class="area" /> <path id="r4" d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="rgba(255, 255, 0, 1.0)" class="area" /> </svg> <table class="table"> <tr> <td data-area="0">1</td> </tr> <tr> <td data-area="1">2</td> </tr> <tr> <td data-area="2">3</td> </tr> <tr> <td data-area="3">4</td> </tr> <tr> <td data-area="0,1">1 + 2</td> </tr> <tr> <td data-area="0,1,2,3">1+2+3+4</td> </tr> </table> <script> let table = document.querySelector(".table"); let svg = document.querySelector("svg"); let area = Array.from(document.querySelectorAll(".area")); let tds = document.querySelectorAll("[data-area]"); let temp = []; table.addEventListener("mouseover", ({ target }) => { if (target = target.closest("[data-area]")) { temp = target.dataset.area.split(","); temp.forEach(i => area[i].classList.add("hover")) } }); table.addEventListener("mouseout", _ => { if (temp.length) { temp.forEach(i => area[i].classList.remove("hover")); temp = []; } }); svg.addEventListener("mouseover", ({ target }) => { if (target = target.closest(".area")) { let i = area.indexOf(target) + ""; tds.forEach(td => { let arr = td.dataset.area.split(","); if (arr.includes(i)) td.classList.add("hover") }) } }); svg.addEventListener("mouseout", ({ target }) => { if (target = target.closest(".area")) { tds.forEach(td => { td.classList.remove("hover") }) } }); </script> </body> </html> |
Большое спасибо за оперативный и качественный ответ. Изучающая код. Но есть еще "обратная сторона". При введении на области svg так же должны подсвечиваться и строки таблицы. Сейчас работаю с изучением этого вопроса.
|
Часовой пояс GMT +3, время: 04:38. |