Google Sankey 图 - 在节点单击时更改链接颜色答案

【问题标题】：Google Sankey diagram - change link color on node clickGoogle Sankey 图 - 在节点单击时更改链接颜色
【发布时间】：2016-06-27 10:32:16
【问题描述】：

我正在使用 Google 图表创建一个桑基图。

我已经设置了

svg path:hover {
fill: red;
}

但这只会在您将鼠标悬停在链接上时更改链接的颜色。如果将鼠标悬停在节点上，链接会突出显示，但不会显示为红色。我希望当您将鼠标悬停在节点上时，所连接的链接会变为与未突出显示的节点相比更具对比的颜色。

我也试过设置

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

虽然这有点帮助，但还是需要更多的对比。

      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>

【问题讨论】：

如果你想继续尝试 CSS 方法，那么当你将鼠标悬停在一个节点上时，谷歌图表库会将链接路径的填充不透明度从 0.6 更改为 0.8。您可以根据填充不透明度编写一个 CSS 选择器，并将填充不透明度为 0.8 的路径更改为不同的颜色。
@nbering 这是我考虑过但不确定如何去做的方法

标签： javascript html css graph google-visualization

【解决方案1】：

注意：path[fill-opacity="0.8"]。这是一个 CSS 选择器，通过 svg fill-opacity 属性的值进行选择。我刚刚从我之前的一个答案中改编了一个概念。请注意，最好通过 class 或 id 进一步限制此规则，以防止其扩散到页面的其他区域。

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>

【讨论】：