Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.01.2022, 18:50
Новичок на форуме
Отправить личное сообщение для Ivanizukhty Посмотреть профиль Найти все сообщения от Ivanizukhty
 
Регистрация: 17.01.2022
Сообщений: 2

Отображение нескольких областей на интерактивной карте (SVG, HTML, CSS, JS)
Приветствую. Сразу сообщу, что я - дилетант в области 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. Понимаю, что надо привязаться к классам, но не понимаю как это сделать.

Заранее благодарен за помощь!
Изображения:
Тип файла: jpg Untitled-4.jpg (111.2 Кб, 5 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 17.01.2022, 23:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,003

Ivanizukhty,
<td data-id="1,2" >1+2</td>
Ответить с цитированием
  #3 (permalink)  
Старый 17.01.2022, 23:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,003

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>

Последний раз редактировалось рони, 22.01.2022 в 20:13.
Ответить с цитированием
  #4 (permalink)  
Старый 19.01.2022, 11:00
Новичок на форуме
Отправить личное сообщение для Ivanizukhty Посмотреть профиль Найти все сообщения от Ivanizukhty
 
Регистрация: 17.01.2022
Сообщений: 2

Большое спасибо за оперативный и качественный ответ. Изучающая код. Но есть еще "обратная сторона". При введении на области svg так же должны подсвечиваться и строки таблицы. Сейчас работаю с изучением этого вопроса.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите плагин для подсветки синтаксиса html css php js кода Кирюха =) Библиотеки/Тулкиты/Фреймворки 2 31.10.2015 05:12
Не получается вставить код js в HTML garmoni Элементы интерфейса 3 05.09.2013 04:56
Ищу jquery, js, html, css спеца. AlexBell Работа 41 23.11.2012 06:20
(постоянка/разово-удаленка) Срочно требуется clientside-разработчик (js, html, css) TravisBickle Работа 4 23.09.2011 09:02
Вакансия: Front-end разработчик (HTML, CSS, JS, Ajax, jQuery) ivankov Работа 0 05.10.2010 18:00