如何访问Firebase中的数据并使用D3.js进行可视化？

Question

我的数据以JSON的形式存储在Firebase中。我想使用D3.js从这些数据创建一个可视化。我以前在D3方面的经验一直是在特定的文件中加载：

d3.csv ('csv-file-here.csv', callbackfunction);

或

d3.json('json-file-here.json', callbackfunction);

但是现在我需要D3从Firebase“访问”或“拉”，我有点不知道该如何做。任何帮助都将不胜感激。

编辑：

好的，我发现了这个：https://github.com/mattdodge/D3Fire，它可以让Firebase和D3互相交谈。然而，我试着按照指示去做，但仍然没有得到任何东西。"Hello“和console.log语句没有输出任何内容。

d3.select('svg').firebase(
    'https://mydatabaseURL.com',
    {
        createFunc : function(newData) {
            // callback when data is added
            console.log(newData.val());
            d3.select("body").append("span").text("Hello, world!");
            return this.append('text').text(newData.val());
        },
        updateFunc : function(changedData) {
            // data was changed, let's change the text
            this.text(changedData.val());
        }
    }
);

编辑2:

如果我没有上面的插件，也不会打印出来.

var ref = firebase.database().ref();

ref.on('value', function(dataSnapshot){
   console.log(dataSnapshot.val());
});

编辑3:

我的问题是我的数据库安全规则。我将其恢复到默认状态，现在我能够与Firebase建立一个连接，并获得快照，将我的数据库打印为一个对象数组。现在，我需要弄清楚如何将数据实际加载到D3中。我试过d3.json(dataSnapshot.val(), function(rawdata){})，但没有加载它。

编辑4:

好的，D3文档似乎表明d3.json()接受一个URL来表示可以请求JSON的位置。因此，如果它位于本地文件夹中，data.json就足够了。因为我想从Firebase获得它，所以我需要找到一种方法，以JSON的形式加载这个Firebase。所以我试着

d3.json('https://mydatabasename.firebaseio.com/.json', update);

但还是没用。打印出原始数据给我undefined。

Answer 1

参考一下你的火力基地。等待它加载数据。然后绘制您的d3可视化。

​

var ref = firebase.database().ref();

ref.on('value', function(snapshot) {

  var data = snapshot.val();
  // draw your d3 vis here using the data

});

​