谷歌图表Sankey -节点文本样式

Question

是否有办法在Google的Sankey图中改变目标节点文本的样式角色的颜色?目前我有这样的数据设置:

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

我可以改变节点和链接的颜色，但不能改变文本。

在这一点上，

d3对我来说不是一个选择，整个想法是动画节点在其位置一个接一个地出现-因此试图改变样式并重新绘制图表。由于节点改变了位置，表无法增长。什么好主意吗?

Answer 1

找不到使用标准选项为单个节点文本设置样式的方法

但颜色可以手动设置，在绘制图表后

通常，图表的'ready'事件可以用来知道图表何时完成绘制，
然而，图表将在每个交互事件上恢复到默认的Node文本样式，
如'onmouseover'、'onmouseout'、&'select'

相反，使用一个突变观察者来改变节点文本上的任何交互性

请参阅下面的工作代码片段，它将颜色映射到每个节点文本…

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>