Umgang mit mehreren Datenobjekte in Protovis (Javascript info Visualisierung)

Question

Ich bin sehr frustriert mit dem Versuch, Protovis einen Satz zu beschneiden und übergeben von Arrays nur Zahlen aus einer Menge von Daten enthält Objekte das sieht so etwas wie unten zu erstellen drei separaten Kreisdiagramme (pv.Wedge) für jedes Objekt. ..

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}];

Aus der Dokumentation mir gesagt es wenig ist Looping man braucht in Protovis zu tun, aber ich kann nicht scheinen, die myData manipulierten / geparsten richtig, so ach ich ausdrücklich Looping zurückgegriffen haben.

Ich habe viele verschiedene Arten von Schlingen versucht, aber das Beste, was ich bekommen habe, ist ein Ausdruck der Zahlen unter einem leeren Raum, in dem ich die Tortendiagramme möchte erscheinen. Ich wäre Ihnen dankbar, wenn mir jemand einen Hinweis auf das, was geben könnte, ich sollte dies zu erreichen, werden zu tun. Derzeit bin ich fest an -

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

Im Folgenden arbeitet. Ich arbeitete mit den Daten, wie Sie es definiert hatte. Es könnte einfacher sein, mit zu arbeiten, wenn die Werte für die Keile waren sich in einem Array. Das heißt, es war interessant, Necken aus den Daten aus dem Objekt. def erstellt eine lokale Variable. Ich entschied mich, dass für Werte zu verwenden und insgesamt nicht normalisieren, da es dann leichter machte es Lables hinzuzufügen später. Es gibt möglicherweise eine elegantere Art und Weise, dies zu tun, aber man sollte einen Ansatz der Lage sein, ohne Looping.

zu sehen

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();