3

私はProtovisライブラリを使用して、データのストリームグラフを作成しています。さまざまなレイヤーに「words」配列のラベルを付けたいと思います。言葉が思い通りに並んでいないようです。このサイトのように、グラフがその特定のレイヤーで最大の場所に挿入する必要があります。

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

ここに画像の説明を入力してください 

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();
4

1 に答える 1

3

これを試して：

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]});

max基本的に、これにより多数のラベルが領域に追加されますが、シリーズで関数を定義することにより、値が最大になるインデックスでのみラベルが表示されます。私はあなたが送ったリンクのコードからこのコードを適応させました。

于 2011-07-08T04:10:38.187 に答える