Google Sankey图 - 更改节点上的链接颜色 [英] Google Sankey diagram - change link color on node click

问题描述

我使用Google图表创建了Sankey图表。

我已设置

  svg路径：hover {
 fill：red; 
} 
  

但是只有当鼠标悬停在链接上时，才会更改链接的颜色。如果将鼠标悬停在节点上，链接将突出显示，但不会以红色显示。我想这样，当你悬停在节点上时，连接的链接更改为与未突出显示的节点更加对比的颜色。

我也尝试设置

  sankey：{
 node：{interactivity：true，} 
} 
  

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

  google.charts.load（'current'，{'package'： ['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] //设置图表选项。 var options = {width：600，sankey：{node：{interactiveivity：true，}}}; //实例化并绘制我们的图表，传递一些选项。 var chart = new google.visualization.Sankey（document.getElementById（'sankey_basic'））; chart.draw（data，options）; }  

  svg path：hover {fill：red;}  

 < script type =text / javascriptsrc = https://www.gstatic.com/charts/loader.js\"> ;</script> < div id =sankey_basicstyle =width：900px; height：300px;>< / div> 
 $ 
 
 
解决方案
  path [fill-opacity =0.8] 。这是一个CSS选择器，通过svg fill-opacity属性的值来选择。我刚刚修改了一个概念从我早些时候的答案。请注意，最好通过类或标识进一步限制此规则，以防止此类规则流出到网页的其他部分。
 
 
 
 http://stackoverflow.com/a/26634831/3771976  
 
 
 
 
 
  google.charts.load（'current'，{'package'：['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] //设置图表选项。 var options = {width：600，sankey：{node：{interactiveivity：true，}}}; //实例化并绘制我们的图表，传递一些选项。 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 / javascriptsrc =https://www.gstatic.com/charts/loader.js>< / script> < div id =sankey_basicstyle =width：900px; height：300px;&>< / div>  

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>
   

解决方案

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.

http://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图 - 更改节点上的链接颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！