Google Charts Sankey - Node text style

问题:

Is there a way to change the color of the target node text with style role in Google's Sankey diagram? Currently I have data setup like this:

[Source, Target, Label, Style] 
[A,B,"Test Label", "#ffffff"]

I am able to change the color of the node and links but not the text.

d3 is not an option for me at this point and the whole idea is to animate the nodes to appear one after the another at its place - hence trying to change the style and re-draw the diagram. Growing the table is not working because the nodes change location. Any ideas?

回答1:

couldn't find a way to style individual Node text using standard options

but the color can be set manually, after the chart is drawn

normally, the chart's 'ready' event can be used to know when the chart has finished drawing,
however, the chart will revert back to the default Node text style on every interactive event,
such as 'onmouseover', 'onmouseout', & 'select'

instead, use a mutation observer to change the Node text on any interactivity

see following working snippet, which maps a color to each Node text...

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>