3

我正在使用 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();
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 回答