javascript - 在谷歌图表桑基图上显示文本

Question

我正在使用 Google Chart - 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

谷歌图表并没有那种定制的能力。

如果您决定使用谷歌图表，那么您链接到的这个解决方案似乎是一个很好的折衷方案。如果您宁愿获得标签而不是使用谷歌图表，我建议您研究d3.js，它允许您可以想象的尽可能多的自定义。

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

/* 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