在 Protovis 中处理多个数据对象（javascript 信息可视化）答案

【问题标题】：Handling multiple data objects in Protovis (javascript info visualization)在 Protovis 中处理多个数据对象（javascript 信息可视化）
【发布时间】：2011-04-21 02:19:11
【问题描述】：

我非常沮丧地尝试修剪一组数组并将其交给 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();

【问题讨论】：

标签： javascript protovis information-visualization

【解决方案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();

【讨论】：