Google Sankey diagram - change link color on node click

Question

I am creating a Sankey diagram with Google charts.

I have set

svg path:hover {
fill: red;
}

but this only changes the color of the links when you hover over the link. If you hover over the node, the links highlight but not in red. I would like it so that when you hover over the node, the links connected change to a more contrasting color to the unhighlighted nodes.

I've also tried setting

sankey: {
        node: { interactivity:true,}
        }

although this helps a bit, there is a need for more contrast.

      google.charts.load('current', {'packages':['sankey']});
      google.charts.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 ]
        ]);

        // Sets chart options.
        var options = {
          width: 600,
          sankey: {
						node: { interactivity:true,}
					}
        };

        // Instantiates and draws 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;
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="sankey_basic" style="width: 900px; height: 300px;"></div>

If you want to keep trying the CSS approach, then when you hover over a node, the google charts library changes the fill opacity of the link path from 0.6 to 0.8. You could conceivably write a CSS selector based on the fill opacity and change paths with a fill opacity of 0.8 to a different colour. — nbering
@nbering This is an approach I've considered but not really sure how to go about it — Alex H

nbering nbering · Accepted Answer · 2016-07-01T15:54:41

Of note: path[fill-opacity="0.8"]. This is a CSS selector that selects by the svg fill-opacity attribute's value. I just adapted a concept from one of my earlier answers. Note that it's probably best to further restrict this rule by a class or id to prevent this from bleeding out to other areas of the page.

https://stackoverflow.com/a/26634831/3771976

      google.charts.load('current', {'packages':['sankey']});
      google.charts.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 ]
        ]);

        // Sets chart options.
        var options = {
          width: 600,
          sankey: {
						node: { interactivity:true,}
					}
        };

        // Instantiates and draws our chart, passing in some options.
        var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
        chart.draw(data, options);
      }

svg path[fill-opacity="0.8"] {
	fill:red;
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="sankey_basic" style="width: 900px; height: 300px;"></div>

Google Sankey diagram - change link color on node click

1 Answers