Question

我正在使用＆＃34; Protovis Mean & Deviation Example＆＃34;绘制图表。在我的html文件中，我包含了这个protovis代码：

<script type="text/javascript+protovis">

/* Convert from tabular format to array of objects. */
var cols = nba.shift();
nba = nba.map(function(d) pv.dict(cols, function() d[this.index]));    
cols.shift();

/* The color scale ranges 3 standard deviations in each direction. */
var x = pv.dict(cols, function(f) pv.mean(nba, function(d) d[f])),
s = pv.dict(cols, function(f) pv.deviation(nba, function(d) d[f])),
fill = pv.dict(cols, function(f) pv.Scale.linear(0, 50,100).range('red', 'yellow', 'green'));

var w = 50, h = 20;

var vis = new pv.Panel()
.width(cols.length * w)
.height(nba.length * h)
.top(70)
.left(100.5)
.right(.5)
.bottom(.5);

vis.add(pv.Panel)
.data(cols)
.left(function() this.index * w)
.width(w)
.add(pv.Panel)
.data(nba)
.top(function() this.index * h)
.height(h)
.strokeStyle("white")
.lineWidth(1)
.fillStyle(function(d, f) fill[f](d[f]))
.title(function(d, f) d.Name + "'s " + f + ": " + d[f]);

vis.add(pv.Label)
.data(cols)
.left(function() this.index * w + w / 2)
.top(0)
.textAngle(-Math.PI / 2)
.textBaseline("middle");

vis.add(pv.Label)
.data(nba)
.left(0)
.top(function() this.index * h + h / 2)
.textAlign("right")
.textBaseline("middle")
.text(function(d) d.Name);

vis.render();

</script>

现在，为了向protovis提供有效数据，我编写了一个Javascript函数。我的javascript函数的相关代码如下：

        for(var k=0; k< xlabelValues.length; k++){          //xAxis header values are in xlabelValues
            nba[0][k+1] = xlabelValues[k];              
        }

        for(var k=0; k< ylabelValues.length; k++){           //yAxis header values are in ylabelValues
            nba[k+1] = [];
            nba[k+1][0] = ylabelValues[k];
            for(var e=1; e<nba[0].length; e++){             
                zValue = hash3D[nba[0][e]+","+ylabelValues[k]];  //hash3D contains numeric values for (x,y) as KEY
                if(typeof zValue == "undefined"){
                    nba[k+1][e] = 0;
                }else{
                    nba[k+1][e] = zValue;
                }
            }
        }

此功能填充＆＃34; nba＆＃34; protovis的数据结构。数据结构根据我的要求有效。这种数据结构的样本如下：

var nba = [
["","January","Feburary","March","April","May","June","July","August","Sep temebr","October","November","December"],
["Event 1",79,38.6,30.2,10.8,22,0.491,7.5,9.8,0.765,1.1,3.5,0.317],
["Event 2",81,37.7,28.4,9.7,19.9,0.489,7.3,9.4,0.78,1.6,4.7,0.344],
["Event 3",82,36.2,26.8,9.8,20.9,0.467,5.9,6.9,0.856,1.4,4.1,0.351],
["Event 4",81,37.7,25.9,9.6,20,0.479,6,6.7,0.89,0.8,2.1,0.359]
];

问题：因为protovis脚本在脚本标签的main.html文件中，因此，我应该如何通过protovis这个＆＃34; nba＆＃34;数据结构？我只希望在我填充＆＃34; nba＆＃34;之后执行protovis代码。用我的javascript函数。

我希望我已经解决了我的问题，期待提出建议和解决方案。非常感谢你的时间。

Answer 1

我猜你发布的帖子太迟了。但是我想花点时间回答它，以防它对其他人有用。

所有protovis或d3函数基本上都适用于json或csv存储数据。这里： var nba = json.

我想该功能会自动填充：

var cols = data.shift();
    nba = data.map(function(d) pv.dict(cols, function() d[this.index]));
    cols.shift();

因此，您唯一需要做的就是更改数据并将此脚本作为nba.js文件与此脚本一起添加到html或php页面。

如何使用Javascript函数更新Protovis数据？

1 个答案:

如何使用Javascript函数更新Pr​​otovis数据？

1 个答案:

如何使用Javascript函数更新Protovis数据？