在Protovis中處理多個數據對象（javascript info visualization）

Question

我非常沮喪地嘗試修剪Protovis，並將一組數組僅包含一組數據對象中的數字，這些數據對象如下所示，以繪製三個單獨的數據對象餅圖（pv.Wedge）爲每個對象...

myData = [{dept:"Accounting",sal:90000,equ:10000,trvl:267,extra:5000}, 
       {dept:"Sales",sal:20000,equ:10000,trvl:3049,extra:7000}, 
       {dept:"Consulting",sal:90000,equ:58000,trvl:983,extra:17000}]; 

從我聽說幾乎沒有一個循環需要Protovis做的，但我似乎無法獲得的myData操作的文件/解析正確，所以唉，我採取了明確的循環。

我已經嘗試了許多不同類型的循環，但我得到的最好的是打印出一個空白空間下的數字，我希望餅圖出現。如果有人能夠給我一個暗示，我應該怎麼做才能做到這一點，我將不勝感激。我目前停留在 -

function getData(dept) { 
    var getvals = new Array(); 
    for(idx in dept) { 
     for(i in idx) { 
      if(idx[i]=="^[0-9]+$") { 
      getme.push(idx[i]); 
     } 
    }  
} 
    return getvals; 

}

// myData = myData.map(function(d) { 
// var valonly = new Array(); 
// for(key in d) { 
//  if(isNaN(d[key])==false) { 
//   valonly.push(d[key]); 
//  } 
// } 
// return valonly; 
// }); 


var vis = new pv.Panel() 
    .width(w) 
    .height(h) 
    .data(getData(myData)) 
vis.add(pv.Wedge) 
    //.data(pv.normalize(getData(myData))) 
    .left(100) 
    .bottom(100) 
    .outerRadius(r) 
    .angle(function(d) d * 2 * Math.PI) 
vis.add(pv.Label) 
    .bottom(0) 
    .left(100) 
    .textAlign("center") 
    //.text(data.dept + " - " + "total: " + hrsum); 


vis.render(); 

Answer 1

以下的作品。我按照您定義的數據處理數據。如果楔子的值本身在數組中，那麼使用它可能會更容易。也就是說，有趣的是從對象中挖掘數據。 def創建一個局部變量。我選擇將它用於值和總數而不是標準化，因爲它稍後可以更輕鬆地添加標籤。有可能是一個更優雅的做法，但你應該能夠看到一個沒有循環的方法。

var myData = [{dept:"Accounting",sal:90000,equ:10000,trvl:267,extra:5000}, 
    {dept:"Sales",sal:20000,equ:10000,trvl:3049,extra:7000}, 
    {dept:"Consulting",sal:90000,equ:58000,trvl:983,extra:17000}]; 

var vis = new pv.Panel() 
    .width(200) 
    .height(200) 
    .data(myData); 

vis.add(pv.Wedge) 
    .def("values", function(d) pv.entries(d).filter(function(e) !isNaN(e.value))) 
    .def("total", function(d) pv.sum(this.values(), function(e) e.value)) 
    .data(function(d) this.values()) 
    .left(100) 
    .bottom(100) 
    .outerRadius(90) 
    .angle(function(d) (d.value/this.total()) * 2 * Math.PI) 
.anchor("center").add(pv.Label) 
    .text(function(d) d.key); 

vis.add(pv.Label) 
    .bottom(0) 
    .left(50) 
    .textAlign("center") 
    .text(function(d) d.dept); 

vis.render();