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

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

1 голос
/ 09 апреля 2019

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

Как выглядит цвет штриха при наведении:

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');
    });
});

1 Ответ

1 голос
/ 09 апреля 2019

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

, когда страна становится активной, для этой страны добавляются новые элементы <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>

EDIT

при активации добавляются два элемента пути,
один с черным штрихом и шириной 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');
              }
            }
...