Charts 如何替换或删除悬停谷歌地理图表上的国家笔划颜色？

我有一个世界各国的谷歌地理图表，当用户在这个国家悬停时，我试图删除笔划颜色。默认笔划颜色为灰色 我发现了如何替换country edge颜色，但是对于悬停事件，它没有在文档中写入任何内容

使用悬停时的笔划颜色现在看起来如何：

-活跃国家的灰色中风

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

-非活跃国家的白色中风

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

---

正如您所发现的，没有标准的配置选项

当某个国家/地区处于活动状态时，将为该国家/地区添加新的

元素

我们可以使用

MutationObserver

来了解何时添加了新元素

与更改非活动国家/地区笔划颜色的功能类似，
我们使用

MutationObserver

更改活动国家的笔划颜色

MutationObserver

将为我们提供添加的元素，
我们只需要深入挖掘，找到实际的

元素

// 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'{
软件包：['geochart']，
mapsApiKey:'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
}).然后（函数（）{
var data=google.visualization.arrayToDataTable([
[‘国家’、‘价值’]，
[‘美国’，1]，
[‘加拿大’，1]，
]);
变量选项={
大小轴：{
最小值：0，
最大尺寸：100
},
颜色轴：{
颜色：['#8a4cab'，'#8a4cab']
},
图例：“无”，
背景色：“透明”，
datalessRegionColor:“透明”，
keepAspectRatio：对，
工具提示：{
isHtml：是的
}
};
var container=document.getElementById（'map'）；
var chart=新的google.visualization.geograpart（容器）；
google.visualization.events.addListener（图表'ready'，函数（）{
//更改非活动笔划颜色
var countries=container.getElementsByTagName（'path'）；
Array.prototype.forEach.call（国家，函数（路径）{
setAttribute（'stroke'，'#d2b9df'）；
});
//更改活动笔划颜色，构建变异观察者
var observer=新的MutationObserver（函数（节点）{
Array.prototype.forEach.call（节点，函数（节点）{
//检查是否有新节点
如果（node.addedNodes.length>0）{
Array.prototype.forEach.call（node.addedNodes，function（addedNode）{
//工具提示元素也将在这里，我们只需要组元素
如果（addedNode.tagName=='g'）{
//查找组元素的子元素
Array.prototype.forEach.call（addedNode.childNodes，函数（childNode）{
//检查路径元素，更改笔划
如果（childNode.tagName=='path'）{
setAttribute（'stroke'，'#ff0000'）；
}
});
}
});
}
});
});
//激活突变观察者
观察者，观察（容器{
儿童名单：是的，
子树：真
});
});
图表绘制（数据、选项）；
});

当我停留在这个国家时，它仍然有一个影子。我怎样才能去掉它呢？请看上面的编辑，我的视力不好，我不能真正注意到阴影，但添加了两个元素。要么删除带有黑色笔划的笔划，就像在编辑中一样，要么将黑色笔划更改为透明。太棒了，我将其与
childNode.setAttribute（'stroke'，'transparent'）一起使用如果笔划颜色为黑色。再次感谢：）