在 Google 图表上显示文本桑基图

Question

我正在使用 Google 图表 - Sankey Diagram。我想让权重显示在每个流上，而不需要鼠标悬停。

官方示例如下(jsfiddle):

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

    // Sets chart options.
    var options = {
      width: 600,
    };

    // Instantiates and draws our chart, passing in some options.
    var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
    chart.draw(data, options);
  }

它可能看起来像这样：

我找到了解决方案，但这不是我想要的。

我想要的是在流量上直接显示权重作为标签。您无需将鼠标移到任何流上即可查看它有多少权重。

Answer 1

Google 图表并不能真正进行这种自定义。

This solution that you linked to seems like a good compromise if you're determined to use google charts. If you'd rather get the labels over use google charts, I'd suggest looking into d3.js，它允许尽可能多的自定义。

使用 d3.js 和 Sankey diagram plugin 我通过添加以下行创建了您想要的图表：

/* add links */
var link = svg.append("g").selectAll(".link")
    .data(graph.links)
    .enter()
  .append("path")
    .attr("class", "link")
    .attr("id",function(d,i) { return "linkLabel" + i; })
    .attr("d", path)
    .style("stroke-width", function (d) {
       return Math.max(1, d.dy);
    })
    .sort(function (a, b) {
       return b.dy - a.dy;
    })
...

var labelText = svg.selectAll(".labelText")
    .data(graph.links)
    .enter()
  .append("text")
    .attr("class","labelText")
    .attr("dx",130)
    .attr("dy",0)
  .append("textPath")
    .attr("xlink:href",function(d,i) { return "#linkLabel" + i;})
    .text(function(d,i) {                                 
        return d.source.name + " → " + d.target.name + " : " + d.value;});

JSFiddle

在 Google 图表上显示文本桑基图

Show Text on Google Chart Sankey Diagram

javascript

data-visualization

google-visualization

sankey-diagram