Protovisで複数のデータオブジェクトを処理する(JavaScript情報の視覚化)
-
27-09-2019 - |
質問
私は、各オブジェクトの3つの別々のパイチャート(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();
解決
次の作品。あなたがそれを定義したように、私はデータを使用しました。ウェッジの値がそれ自体が配列であれば、操作が簡単になる可能性があります。とはいえ、オブジェクトからのデータをからかいながら興味深いものでした。 defはローカル変数を作成します。私はそれを正常化するのではなく、値と合計に使用することを選択しました。その後、後でレーブルを追加しやすくしました。これを行うには、よりエレガントな方法がある可能性がありますが、ループせずに1つのアプローチを見ることができるはずです。
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();
所属していません StackOverflow