Google Sankey Color Hover

Question 1

For those browsers that support svg the following css will enable a hover behavior for the chart:

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>

This uses the same :hover that is used by other css and addresses the path elements in the svg and uses a svg attribute for fill combined with the color of your choice. If the chart were more complex (had other path elements we didn't want to add :hover to we'd have to make the selector more specific.

Question 2

If you want to highlight all the paths from a selected end, you can try this:

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

this will paint red all the paths that normally are at full opacity, that is the highlighted ones. expanding the jsfiddle by Jason Aller, the effect is here: http://jsfiddle.net/6bfpcv9g/