在 Protovis 中为 pv.Layout.Stack（流图）添加标签答案

【问题标题】：Adding labels to a pv.Layout.Stack (streamgraph) in Protovis在 Protovis 中为 pv.Layout.Stack（流图）添加标签
【发布时间】：2011-09-30 22:01:03
【问题描述】：

我正在使用 Protovis 库来制作数据流图。我想用“单词”数组标记不同的层。我似乎无法用词来排列我想要的样子。我希望将它们插入到该特定层的图形最大的位置，类似于此站点：

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

【问题讨论】：

标签： javascript label protovis stream-graph

【解决方案1】：

试试这个：

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，只会使它们在值为最大值的索引处可见。我根据您发送的链接中的代码改编了这段代码。

【讨论】：