Google Charts Sankey - 节点文本样式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Google Charts Sankey - 节点文本样式相关的知识,希望对你有一定的参考价值。

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

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

我能够更改节点和链接的颜色,但不能更改文本。

在这一点上,d3对我来说不是一个选项,整个想法是让节点动画一个接一个地出现在它的位置 - 因此试图改变样式并重新绘制图表。由于节点更改位置,因此增长表无效。有任何想法吗?

答案

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

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

通常情况下,图表的'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>

以上是关于Google Charts Sankey - 节点文本样式的主要内容,如果未能解决你的问题,请参考以下文章

根据数据中的附加列更改 d3 Sankey 图中的节点颜色

R Highcharter Sankey节点列属性问题

当链接太多时,d3 sankey插件没有绘制?

plotly Sankey 图:如何更改节点的默认顺序

pyecharts实现多节点长路径的sankey桑基图

pyecharts实现多节点长路径的sankey桑基图