在Google Chart Sankey Diagram上显示文本

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

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

如果您决心使用Google图表，那么您链接到的此解决方案似乎是一个不错的折衷方案。如果您希望通过使用Google图表获得标签，我建议您查看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