如何使用Javascript功能更新Protovis數據？

我正在使用「Protovis Mean & Deviation Example」繪製圖表。在我的HTML文件，我包括這protovis代碼：如何使用Javascript功能更新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; 
       } 
      } 
     }

此函數爲protovis填充「nba」數據結構。數據結構在我需要時是有效的。這樣的數據結構的樣品低於：

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這個「NBA」數據結構？我只想在使用javascript函數填充「nba」之後執行protovis代碼。

我希望我已經清除了我的問題，期待您的建議和解決方案。非常感謝您的寶貴時間。

來源

2015-06-21 Amir

好吧剛剛發現你的帖子太晚我猜。但我想花時間回答以防萬一它可能對別人有用。

所有的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();

所以，你必須做的唯一的事情就是改變DATAS這個腳本添加到您的HTML或PHP頁面作爲NBA。 js文件以及這個腳本。

此外，你有多種方式來生成與其他語言的json或csv。我使用perl這是很好的文件寫入。

歡呼那些非常有用的圖書館！

來源

2016-04-25 15:01:30

如何使用Javascript功能更新Protovis數據？

回答

相關問題