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

Question

我正在使用 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>
   

Answer 1

注意:路径[fill-opacity="0.8"]。这是一个 CSS 选择器，通过 svg fill-opacity 属性的值进行选择。我只是从我之前的一个答案中改编了一个概念。请注意，最好通过类或 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>