首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Google Sankey Color Hover

Google Sankey Color Hover
EN

Stack Overflow用户
提问于 2014-04-03 07:01:05
回答 2查看 1.9K关注 0票数 1

使用本接口:https://developers.google.com/chart/interactive/docs/gallery/sankey

我想做一个Sankey图。当鼠标悬停在链接上时,有没有办法在不影响其他链接的情况下更改链接的颜色?因此,默认情况下,它们将是灰色的,然后当鼠标悬停在某个链接上时,单个链接将变为蓝色,而其他链接将保持灰色?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-04-03 11:38:51

对于那些支持svg的浏览器,以下css将启用图表的悬停行为:

代码语言:javascript
复制
svg path:hover {
    fill: red;
}

代码语言:javascript
复制
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);
}
代码语言:javascript
复制
svg path:hover {
  fill: red;
}
代码语言:javascript
复制
<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的路径元素),我们必须使选择器更具体。

票数 1
EN

Stack Overflow用户

发布于 2015-03-13 20:35:55

如果要高亮显示选定端点的所有路径,可以尝试执行以下操作:

代码语言:javascript
复制
svg path:not([fill-opacity])
    {
         fill: red;
    }

这将绘制红色的所有路径,通常是在完全不透明,这是突出显示的。扩展jsfiddle by Jason Aller,效果如下:http://jsfiddle.net/6bfpcv9g/

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22824744

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档