Question

我将我的数据存储为Firebase中的JSON。我想使用D3.js从该数据创建可视化。我以前在D3中的经验一直是加载特定文件：

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

OR

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

但现在我需要D3来＆＃34;访问＆＃34;或者＆＃34;拉＆＃34;来自Firebase，我对如何做到这一点有点失落。任何帮助将不胜感激。

修改

好的，所以我发现了这个：https://github.com/mattdodge/D3Fire可以使Firebase和D3相互通信。但是，我尝试按照说明操作，仍然无法正常工作。那个＆＃34; Hello World＆＃34;并且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()获取了可以进行JSON请求的位置的URL。因此，如果它位于本地文件夹中，data.json就足够了。因为我想从Firebase获取它，我需要找到一种方法来加载Firebase作为JSON。所以我试过

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

仍然无法正常工作。打印出原始数据会给我undefined。

Answer 1

引用你的firebase。等待它加载数据。然后绘制你的d3可视化。

＆＃13;

var ref = firebase.database().ref();

ref.on('value', function(snapshot) {

  var data = snapshot.val();
  // draw your d3 vis here using the data

});

＆＃13;

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

1 个答案: