在谷歌圖的熱平衡圖

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