谷歌桑基颜色悬停答案

【问题标题】：Google Sankey Color Hover谷歌桑基颜色悬停
【发布时间】：2014-04-02 23:01:04
【问题描述】：

使用此 API： https://developers.google.com/chart/interactive/docs/gallery/sankey

我想做一个桑基图。当鼠标悬停在链接上时，有什么方法可以改变链接的颜色而不影响其他链接？所以，默认情况下它们是灰色的，然后当鼠标悬停在一个链接上时，那个单独的链接会变成蓝色，而其他链接会保持灰色？

【问题讨论】：

你试过用你的css寻址path:hover吗？您是否有可以在jsfiddle 中分享的现有示例？
我使用的代码包含我用于研究的数据，所以我不一定把它放在 jsfiddle 上共享，但是代码与多级示例相同提供的网站，只是插入了更多的数字。而且我目前没有 CSS，但我可以用“路径”引用 CSS 中的链接吗？
出于 jsfiddle 的目的，您可以只使用一些随机数据。我尚未检查 Google 图表如何处理无法处理 svg 文件的浏览器，但您提供的链接中的图表是 svg（可缩放矢量图形）文件，当图表呈现为svg.
API 不支持您想要的（尽管您可以通过 @JasonAller 建议的 CSS 技巧获得一半）。我建议创建一个feature request 以添加对其他颜色控件的支持。

标签： javascript css google-visualization sankey-diagram

【解决方案1】：

对于那些支持 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 的路径元素，我们必须使选择器更具体。

【讨论】：

这个版本使用了一些其他的jsfiddle特性来分离代码和内容：jsfiddle.net/Q7rNs/2
非常感谢！当您将鼠标悬停在特定节点上时，您知道是否有任何方法将此效果应用于连接到节点的所有链接？
查看他们使用的 svg 的结构我没有看到仅使用 css 的方法，但使用 JavaScript 可能是可能的。如果您有这些方面的要求，您可能需要查看d3.js，它也可以使用Sankey diagrams，并且对使图表具有交互性有很多支持。

【解决方案2】：

如果要突出显示选定端的所有路径，可以试试这个：

svg path:not([fill-opacity])
    {
         fill: red;
    }

这会将通常完全不透明的所有路径涂成红色，即突出显示的路径。 Jason Aller 扩展了 jsfiddle，效果在这里：http://jsfiddle.net/6bfpcv9g/

【讨论】：

谢谢，但我在一年前完成了那个项目。
无论如何都可以有人使用它，这就是 stackexchange 的精神，恕我直言。
不确定我是否理解这是做什么的，小提琴也只显示hover CSS。我想要一些可以淡出其他链接的东西，知道如何做到这一点吗？