Google Sankey Color Hover
Google Sankey Color Hover
提问于 2014-04-03 07:01:05
使用本接口：https://developers.google.com/chart/interactive/docs/gallery/sankey
我想做一个Sankey图。当鼠标悬停在链接上时，有没有办法在不影响其他链接的情况下更改链接的颜色？因此，默认情况下，它们将是灰色的，然后当鼠标悬停在某个链接上时，单个链接将变为蓝色，而其他链接将保持灰色？
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-04-03 11:38:51
对于那些支持svg的浏览器，以下css将启用图表的悬停行为：
svg path:hover {
fill: red;
}
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
['A', 'X', 5],
['A', 'Y', 7],
['A', 'Z', 6],
['B', 'X', 2],
['B', 'Y', 9],
['B', 'Z', 4],
]);
// Set chart options
var options = {
width: 600,
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data, options);
}svg path:hover {
fill: red;
}<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['sankey']}]}">
</script>
</head>
<body>
<div id="sankey_basic" style="width: 900px; height: 300px;"></div>
</body>
</html>
它使用与其他css相同的:hover，并处理svg中的path元素，并使用fill的svg属性和您选择的颜色相结合。如果图表更复杂(有其他我们不想添加:hover的路径元素)，我们必须使选择器更具体。
Stack Overflow用户
发布于 2015-03-13 20:35:55
如果要高亮显示选定端点的所有路径，可以尝试执行以下操作：
svg path:not([fill-opacity])
{
fill: red;
}这将绘制红色的所有路径，通常是在完全不透明，这是突出显示的。扩展jsfiddle by Jason Aller，效果如下：http://jsfiddle.net/6bfpcv9g/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22824744
复制相关文章
相似问题
腾讯云开发者
