Question

我有一个包含世界国家/地区的Google地理图表，并且我试图在用户将鼠标悬停在该国家/地区时删除笔触颜色。默认笔触颜色为灰色我发现了如何替换国家/地区边缘的颜色，但是对于悬停事件，它没有在文档中写任何内容。

现在如何将鼠标悬停在笔划颜色上？

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

如何在悬停的Google地理图表上替换或删除国家/地区笔划颜色？

1 个答案: