如何替换或删除悬停Google Geo图表上的国家笔画颜色？

Question

我有一个谷歌地理图表与世界各国，我试图删除当用户悬停国家时的笔画颜色。默认的笔画颜色是灰色的，我找到了如何替换国家边缘颜色，但是对于悬停事件，它不会在文档中写入任何内容。

现在在悬停上用笔画颜色看上去怎么样：

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

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