Protovisのpv.Layout.Stack（ストリームグラフ）にラベルを追加する

私はProtovisライブラリと連携してデータのストリームグラフを作成しています。私は "単語"配列で別のレイヤーにラベルを付ける必要があります。私はどのように整列する言葉を得るように見えることができません。基本的にはProtovisのpv.Layout.Stack（ストリームグラフ）にラベルを追加する

vis.add(pv.Layout.Stack) 
    .layers(data) 
    .order("inside-out") 
    .offset("wiggle") 
    .x(x.by(pv.index)) 
    .y(y) 
    .layer.add(pv.Area) 
    .fillStyle(pv.ramp("#aad", "#556").by(Math.random)) 
    .strokeStyle(function() { this.fillStyle().alpha(.5) }) 
// this is new code: 
.anchor("center").add(pv.Label) 
    .def("max", function(d) {return pv.max.index(d)}) 
    .visible(function() {return this.index == this.max() }) 
    .text(function(d, p) {return words[this.parent.index]});

：これを試してみてください

http://mbostock.github.com/protovis/ex/jobs.html

enter image description here

var words = [ 
"tasty","delicious","yum","scrumpious","dry"]; 
var data = [ 
[23,52,6,3,16,35,24,12,35,119,2,5,65,33,81,61,55,122,3,19,2,5,65,33,81,61,55,122,3,19,54,72,85,119,23,52,6,3,16,35], 
[43,2,46,78,46,25,54,72,85,119,23,52,6,3,16,35,24,12,35,119,23,52,6,3,16,35,24,12,35,119,2,5,65,33,81,61,55,122,3,19], 
[2,5,65,33,81,61,55,122,3,19,54,72,85,119,23,52,6,3,16,35,2,5,65,33,81,1,5,12,95,14,12,8,84,115,15,27,6,31,6,35], 
[2,5,6,3,1,6,5,12,32,191,142,22,75,139,27,32,26,13,161,35,21,52,64,35,21,61,55,123,5,142,54,58,8,11,53,2,64,3,16,35], 
[2,5,65,33,81,61,55,122,3,19,54,72,85,119,23,52,6,3,16,35,2,5,65,33,81,61,55,123,5,142,54,58,8,11,53,2,64,3,16,35]]; 

var w = 800, 
    h = 300, 
    x = pv.Scale.linear(0, 40).range(0, w), 
    y = pv.Scale.linear(0, 600).range(0, h); 

var vis = new pv.Panel() 
    .canvas('streamgraph') 
    .width(w) 
    .height(h); 

vis.add(pv.Layout.Stack) 
    .layers(data) 
    .order("inside-out") 
    .offset("wiggle") 
    .x(x.by(pv.index)) 
    .y(y) 
    .layer.add(pv.Area) 
    .fillStyle(pv.ramp("#aad", "#556").by(Math.random)) 
    .strokeStyle(function() { this.fillStyle().alpha(.5) }); 



vis.render();

出典

2011-07-08 Josh O' Bryan