Ich erstelle ein Sankey-Diagramm mit Google-Karten.Google Sankey-Diagramm - Ändern der Linkfarbe auf Knoten klicken
Ich habe
gesetztsvg 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>
Wenn Sie die CSS-Ansatz zu halten versuchen wollen, dann, wenn Sie über einen Knoten bewegen, ändert sich die Google-Charts Bibliothek die Fülldeckkraft des Verbindungsweges von 0,6 bis 0.8. Sie könnten einen CSS-Selektor basierend auf der Füll-Opazität und den Pfadänderungen mit einer Füll-Opazität von 0,8 in eine andere Farbe schreiben. – nbering
@nbering \t Dies ist ein Ansatz, den ich in Betracht gezogen habe, aber nicht wirklich sicher, wie es geht –