Как заменить или удалить цвет обводки страны при наведении Google Geo Charts?

У меня есть диаграмма Google Geo со странами мира, и я пытаюсь удалить цвет обводки, когда пользователь наводит курсор на страну. Цвет обводки по умолчанию серый и я нашел как заменить цвет края страны, но для события наведения ничего не пишет в документации.

Как теперь выглядит цвет обводки при наведении:

https://imgur.com/AJXbmQ9 — серая обводка для активных стран

https://imgur.com/SyWQF1Q - Белая обводка для неактивных стран

var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Popularity');
data.addColumn({ type: 'string', role: 'tooltip' });
data.addRows(countriesData);

var options = {
    sizeAxis: {
        minValue: 0,
        maxSize: 100
    },
    colorAxis: {
        colors: colors
    },
    legend: 'none',
    backgroundColor: 'transparent',
    datalessRegionColor: 'transparent',
    keepAspectRatio: true,
    tooltip: {
        isHtml: true
    }
};
var chart = new google.visualization.GeoChart(document.getElementById('map'));
chart.draw(data, options);

google.visualization.events.addListener(chart, 'ready', function () {
    var countries = document.getElementById('map').getElementsByTagName('path');
    Array.prototype.forEach.call(countries, function (path) {
        path.setAttribute('stroke', '#d2b9df');
    });
});

charts google-visualization

09.04.2019 10:43

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

576

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

как вы обнаружили, стандартного параметра конфигурации нет.

когда страна становится активной, для этой страны добавляются новые элементы <path>.

мы можем использовать MutationObserver, чтобы узнать, когда были добавлены новые элементы.

аналогично вашей функции по изменению цвета обводки для неактивных стран,
мы используем MutationObserver, чтобы изменить цвет обводки для активных стран.

MutationObserver даст нам добавленные элементы,
нам просто нужно покопаться, чтобы найти настоящие <path> элементы.

// change active stroke color, build mutation observer
var observer = new MutationObserver(function (nodes) {
  Array.prototype.forEach.call(nodes, function(node) {
    // check for new nodes
    if (node.addedNodes.length > 0) {
      Array.prototype.forEach.call(node.addedNodes, function(addedNode) {
        // the tooltip element will also be here, we only want the group elements
        if (addedNode.tagName === 'g') {
          // find children of the group element
          Array.prototype.forEach.call(addedNode.childNodes, function(childNode) {
            // check for path element, change stroke
            if (childNode.tagName === 'path') {
              childNode.setAttribute('stroke', '#ff0000');
            }
          });
        }
      });
    }
  });
});

// activate mutation observer
observer.observe(container, {
  childList: true,
  subtree: true
});

см. следующий рабочий фрагмент...

google.charts.load('current', {
  packages: ['geochart'],
  mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'value'],
    ['United States', 1],
    ['Canada', 1],
  ]);

  var options = {
    sizeAxis: {
      minValue: 0,
      maxSize: 100
    },
    colorAxis: {
      colors: ['#8a4cab', '#8a4cab']
    },
    legend: 'none',
    backgroundColor: 'transparent',
    datalessRegionColor: 'transparent',
    keepAspectRatio: true,
    tooltip: {
      isHtml: true
    }
  };

  var container = document.getElementById('map');
  var chart = new google.visualization.GeoChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    // change inactive stroke color
    var countries = container.getElementsByTagName('path');
    Array.prototype.forEach.call(countries, function (path) {
      path.setAttribute('stroke', '#d2b9df');
    });

    // change active stroke color, build mutation observer
    var observer = new MutationObserver(function (nodes) {
      Array.prototype.forEach.call(nodes, function(node) {
        // check for new nodes
        if (node.addedNodes.length > 0) {
          Array.prototype.forEach.call(node.addedNodes, function(addedNode) {
            // the tooltip element will also be here, we only want the group elements
            if (addedNode.tagName === 'g') {
              // find children of the group element
              Array.prototype.forEach.call(addedNode.childNodes, function(childNode) {
                // check for path element, change stroke
                if (childNode.tagName === 'path') {
                  childNode.setAttribute('stroke', '#ff0000');
                }
              });
            }
          });
        }
      });
    });

    // activate mutation observer
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  chart.draw(data, options);
});

<script src = "https://www.gstatic.com/charts/loader.js"></script>
<div id = "map"></div>

РЕДАКТИРОВАТЬ

когда он становится активным, добавляются два элемента пути,
один с черной обводкой и шириной 3,
и еще один с цветом выделения и шириной 1.

проверьте атрибут штриха и удалите черный узел...

            // check for path element, remove shadow, change stroke
            if (childNode.tagName === 'path') {
              if (childNode.getAttribute('stroke') === '#000000') {
                addedNode.removeChild(childNode);
              } else {
                childNode.setAttribute('stroke', '#ff0000');
              }
            }

У страны все еще есть тень, когда я навожу на нее курсор. Как я могу удалить это?

— 09.04.2019 14:51

см. РЕДАКТИРОВАТЬ выше, у меня зрение не очень, я не мог заметить тень, но добавлены два элемента. либо удалите ту, что с черной обводкой, как в редактировании, либо измените черную обводку на прозрачную.

— 09.04.2019 15:33

Круто, я использую его с childNode.setAttribute('stroke', 'transparent');, если цвет обводки черный. Еще раз спасибо :)

— 09.04.2019 15:56

09.04.2019 14:21