1

Gibt es eine Möglichkeit, die Farbe des Zielknotentextes mit Style-Rolle im Google-Sankey-Diagramm zu ändern? Zur Zeit habe ich Daten Setup wie folgt:Google Charts Sankey - Node-Textstil

Ich bin in der Lage, die Farbe des Knotens und Links, aber nicht den Text zu ändern.

d3 ist zu diesem Zeitpunkt keine Option für mich und die ganze Idee besteht darin, die Knoten nacheinander an ihrer Stelle erscheinen zu lassen - daher versuchen Sie, den Stil zu ändern und das Diagramm neu zu zeichnen. Das Wachsen der Tabelle funktioniert nicht, da die Knoten den Speicherort ändern. Irgendwelche Ideen?

Antwort

1

konnte nicht einen Weg finden, einzelne Knoten Text unter Verwendung von Standardoptionen

aber die Farbe, Stil kann manuell eingestellt werden, nachdem das Diagramm

normalerweise gezogen wird, die 'ready' Veranstaltung Tabelle kann verwendet werden, zu wissen, wenn das Diagramm zeichnet beendet ist,
jedoch, wird das Diagramm Knoten Text wieder zurück Stil auf den Standard auf jedem interaktiven Ereignisse,
wie 'onmouseover', 'onmouseout', & 'select'

stattdessen eine Mutation Beobachter verwenden, um die Knoten Text auf jeder Interaktivität, die eine Farbe ...

zu jedem Knoten Text abbildet

siehe folgende Arbeits Schnipsel zu ändern

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

 
    var options = { 
 
    width: 600 
 
    }; 
 

 
    var colorMap = { 
 
    'A': 'cyan', 
 
    'X': 'magenta', 
 
    'Y': 'yellow', 
 
    'Z': 'lime', 
 
    'B': 'violet' 
 
    }; 
 

 
    var chartDiv = document.getElementById('sankey_basic'); 
 
    var chart = new google.visualization.Sankey(chartDiv); 
 

 
    var observer = new MutationObserver(function (mutations) { 
 
    mutations.forEach(function (mutation) { 
 
     mutation.addedNodes.forEach(function (node) { 
 
     if (node.tagName === 'text') { 
 
      node.setAttribute('font-size', '20'); 
 
      node.setAttribute('fill', colorMap[node.innerHTML]); 
 
     } 
 
     }); 
 
    }); 
 
    }); 
 
    observer.observe(chartDiv, { 
 
    childList: true, 
 
    subtree: true 
 
    }); 
 

 
    chart.draw(data, options); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="sankey_basic"></div>