Google chart sankey-“在行中找到循环”错误答案

【问题标题】：Google chart sankey-- "Cycle found in rows" errorGoogle chart sankey-“在行中找到循环”错误
【发布时间】：2020-10-01 23:14:15
【问题描述】：

我正在使用 Google Chart - Sankey Diagram 来显示同一组 A、B、C、D 类别中随时间推移的流量。 Photo attached.

我想删除月份和年份，例如“（Dec 2019）”，“（Apr 2020）”来自我的节点标签，以便标签只读“A”，“B”，“C”，“D”，并且月/年打印在图表下方对于 Sankey 的每个级别。我无法执行此操作，因为当我从标签中删除月份/年份时，我收到“在行中找到周期”错误。

如何制作具有相同节点标签但不会出现此错误的图表？
如何为 Sankey 的每个级别（即月/年）添加图例？

非常感谢。

代码：

<html>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>
<script type="text/javascript">
  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 (Aug 2019)', 'A (Dec 2019)', 83.94 ],
       [ 'A (Aug 2019)', 'C (Dec 2019)', 6.94 ],
       [ 'A (Aug 2019)', 'B (Dec 2019)', 6.11  ],
       [ 'A (Aug 2019)', 'D (Dec 2019)', 3.01 ],
       [ 'C (Aug 2019)', 'A (Dec 2019)', 1.29  ],
       [ 'C (Aug 2019)', 'C (Dec 2019)', 83.30 ],
       [ 'C (Aug 2019)', 'B (Dec 2019)', 9.87  ],
       [ 'C (Aug 2019)', 'D (Dec 2019)',  5.54  ],
       [ 'B (Aug 2019)', 'A (Dec 2019)', 1.23 ],
       [ 'B (Aug 2019)', 'C (Dec 2019)', 13.55 ],
       [ 'B (Aug 2019)', 'B (Dec 2019)', 78.79 ],
       [ 'B (Aug 2019)', 'D (Dec 2019)', 6.42 ],
       [ 'D (Aug 2019)', 'A (Dec 2019)', 0.36 ],
       [ 'D (Aug 2019)', 'C (Dec 2019)', 2.08 ],
       [ 'D (Aug 2019)', 'B (Dec 2019)', 1.90 ],
       [ 'D (Aug 2019)', 'D (Dec 2019)', 95.67 ],
       [ 'A (Dec 2019)', 'A (Apr 2020)', 38.3 ],
       [ 'A (Dec 2019)', 'C (Apr 2020)', 21.19 ],
       [ 'A (Dec 2019)', 'B (Apr 2020)', 9.82 ],
       [ 'A (Dec 2019)', 'D (Apr 2020)', 30.69 ],
       [ 'C (Dec 2019)', 'A (Apr 2020)', 4 ],
       [ 'C (Dec 2019)', 'C (Apr 2020)', 55.9 ],
       [ 'C (Dec 2019)', 'B (Apr 2020)', 6.23 ],
       [ 'C (Dec 2019)', 'D (Apr 2020)', 33.87 ],
       [ 'B (Dec 2019)', 'A (Apr 2020)', 3.53 ],
       [ 'B (Dec 2019)', 'C (Apr 2020)', 18.82 ],
       [ 'B (Dec 2019)', 'B (Apr 2020)', 20.31 ],
       [ 'B (Dec 2019)', 'D (Apr 2020)', 57.34 ],
       [ 'D (Dec 2019)', 'A (Apr 2020)', 0.73 ],
       [ 'D (Dec 2019)', 'C (Apr 2020)', 3 ],
       [ 'D (Dec 2019)', 'B (Apr 2020)', 1.65 ],
       [ 'D (Dec 2019)', 'D (Apr 2020)', 94.61 ],
       [ 'A (Apr 2020)', 'A (Aug 2020)', 37.38 ],
       [ 'A (Apr 2020)', 'C (Aug 2020)', 28.90 ],
       [ 'A (Apr 2020)', 'B (Aug 2020)', 22.01 ],
       [ 'A (Apr 2020)', 'D (Aug 2020)', 11.71 ],
       [ 'C (Apr 2020)', 'A (Aug 2020)', 4.26 ],
       [ 'C (Apr 2020)', 'C (Aug 2020)', 68.97 ],
       [ 'C (Apr 2020)', 'B (Aug 2020)', 14.35 ],
       [ 'C (Apr 2020)', 'D (Aug 2020)', 12.41 ],
       [ 'B (Apr 2020)', 'A (Aug 2020)', 3.78 ],
       [ 'B (Apr 2020)', 'C (Aug 2020)', 27.26 ],
       [ 'B (Apr 2020)', 'B (Aug 2020)', 49.72 ],
       [ 'B (Apr 2020)', 'D (Aug 2020)', 18.74 ],
       [ 'D (Apr 2020)', 'A (Aug 2020)', 0.98 ],
       [ 'D (Apr 2020)', 'C (Aug 2020)', 10.15 ],
       [ 'D (Apr 2020)', 'B (Aug 2020)', 10.87 ],
       [ 'D (Apr 2020)', 'D (Aug 2020)', 78 ]
    ]);
    
    var colors = ['#355C7D', '#355C7D', '#6C5B7B', '#C06C84','#F8B195', 
                   '#6C5B7B','#C06C84', '#F8B195', '#355C7D', '#6C5B7B', 
                   '#C06C84','#F8B195', '#355C7D', '#6C5B7B', '#C06C84',
                   '#F8B195'];

    var options = {
      height: 400,
      sankey: {
        node: {
          colors: colors,
          label: { bold: true}
        },
        link: {
          colors: colors,
          colorMode: 'gradient',
          iterations: 0
        }
      }
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
    chart.draw(data, options);
   }
   
</script>
</body>
</html>

【问题讨论】：

我找到的标签的唯一选项是在标签末尾使用空格或空格数。 here 就是一个例子。至于图例，也没有标准选项。 here 是使用其中一个 core 图表创建自定义图例的示例...

标签： javascript html d3.js google-visualization jsfiddle

【解决方案1】：

那是因为一旦你去掉月份标签，两边都有重复的类别，即自链接。

例如在您的月份标签被删除后，您不希望 A 链接到您的案例中的 A

Here's a line from the docs

注意：避免数据中的循环：如果 A 链接到自身，或者链接到 B 链接到 C 链接到 A，则您的图表将不会呈现。

【讨论】：