Question

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

我已经设置了

svg path:hover {
fill: red;
}

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

我也尝试过设置

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

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

＆＃13;

      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);
      }

＆＃13;

svg path:hover {
	fill:red;
}

＆＃13;

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

＆＃13;

Answer 1

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

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

＆＃13;

      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);
      }

＆＃13;

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

＆＃13;

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

＆＃13;

Google Sankey图表 - 更改节点点击时的链接颜色

1 个答案: