如何使用 Firebase 数据制作简单的 d3 图表？

Question

我想查询一首特定歌曲在 firebase 中记录了多少条目。换句话说，我试图获取歌曲的总播放次数并将它们绘制在图表上。

我试图获取 firebase 数组的长度，但我知道我必须使用 $loaded.then(function())。我将如何在这里使用它？我的控制器：

(function () {
function MetricsCtrl($scope,$firebaseArray, Metric) {
    var firebaseRef = new Firebase("https://bloc-jams.firebaseio.com/");

    $scope.options = {...};

    var blue = $firebaseArray(firebaseRef.child('Songs').orderByChild('name').equalTo("Blue"))
    var green = $firebaseArray(firebaseRef.child('Songs').orderByChild('name').equalTo("Green"))
    var red = $firebaseArray(firebaseRef.child('Songs').orderByChild('name').equalTo("Red"))
    var pink = $firebaseArray(firebaseRef.child('Songs').orderByChild('name').equalTo("Pink"))
    var magenta = $firebaseArray(firebaseRef.child('Songs').orderByChild('name').equalTo("Magenta"))

    $scope.data = [
        {
            values: [
                {
                    "label" : "Blue" ,
                    "value" :  blue.length
                } ,
                {
                    "label" : "Green" ,
                    "value" : green.length
                } ,
                {
                    "label" : "Red" ,
                    "value" : red.length
                } ,
                {
                    "label" : "Pink" ,
                    "value" : pink.length
                } ,
                {
                    "label" : "Magenta" ,
                    "value" : magenta.length
                }
            ]
        }
    ]
}

angular
    .module('blocJams')
    .controller('MetricsCtrl', ['$scope','$firebaseArray','Metric', MetricsCtrl]);
})();

Answer 1

您的推理是正确的，您只能在加载 firebase 数组后才能制作图表。

如果您正在使用 angular 的承诺服务 $q:

$q.all([ blue.$loaded(), 
         green.$loaded(), 
         red.$loaded(), 
         pink.$loaded(), 
         magenta.$loaded()
]).then(makeChart)

function makeChart(data) {
  // data[0] is blue, data[1] is green, etc.
  // ...
  // $scope.data = [{...}]
}

如何使用 Firebase 数据制作简单的 d3 图表？

How do I make a simple d3 chart with Firebase data?

javascript

d3.js

firebase

nvd3.js

angularfire