Google Sankey-Diagramm - Ändern der Linkfarbe auf Knoten klicken

Question

Ich erstelle ein Sankey-Diagramm mit Google-Karten.

Ich habe

gesetzt

svg path:hover { 
fill: red; 
} 

aber dies ändert sich nur die Farbe der Links, wenn Sie über den Link bewegen. Wenn Sie den Mauszeiger über den Knoten bewegen, werden die Links hervorgehoben, aber nicht rot. Ich möchte es so, dass, wenn Sie den Mauszeiger über den Knoten bewegen, die verbundenen Verbindungen in eine kontrastierende Farbe zu den nicht hervorgehobenen Knoten wechseln.

Ich habe auch versucht

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

obwohl das hilft ein wenig, gibt es einen Bedarf für mehr Kontrasteinstellung.

 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: { 
 
\t \t \t \t \t \t node: { interactivity:true,} 
 
\t \t \t \t \t } 
 
     }; 
 

 
     // 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 { 
 
\t 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

Beachtenswert: path[fill-opacity="0.8"]. Dies ist ein CSS-Selektor, der nach dem Wert des Attributs SVG-Fill-Opacity auswählt. Ich habe gerade ein Konzept aus einer meiner früheren Antworten übernommen. Beachten Sie, dass es wahrscheinlich am besten ist, diese Regel durch eine Klasse oder eine ID weiter einzuschränken, um zu verhindern, dass dies in andere Bereiche der Seite übergeht.

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: { 
 
\t \t \t \t \t \t node: { interactivity:true,} 
 
\t \t \t \t \t } 
 
     }; 
 

 
     // 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"] { 
 
\t 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>