在谷歌图的热平衡图

Question

我使用谷歌图显示文本。我想让权重显示在每个流程上，而不需要鼠标悬停。

对于官方样片如下（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); 
    } 

它可能看起来像这样：

我发现this的解决方案，但它不是我想要的。

我想直接显示重量上的流标签是什么。您不需要将鼠标移动到任何流量上以查看它有多少重量。

感谢先进！

Answer 1

谷歌图表是不是真的那么能干那种定制的。你链接到

This解决方案似乎是一个很好的妥协，如果你决定使用谷歌的图表。如果你宁愿在使用谷歌的图表获得的标签，我会建议寻找到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