FirebaseのデータにアクセスしてD3.jsで視覚化するにはどうすればよいですか？

Question

FirebaseにJSONとして保存されたデータを持っています。私はそのデータから視覚化を作成するためにD3.jsを使用したいと思います。 D3での私の経験では、常に特定のファイルにロードするようにされています：

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

OR

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

をしかし、今、私はD3がFirebaseから「アクセス」または「プル」する必要があることを、私はよどのようにそれを行うには少し失われた。どんな助けでも大歓迎です。

編集：

わかりましたので、私は、この発見：FirebaseとD3がお互いに話をすることができたhttps://github.com/mattdodge/D3Fireを。しかし、私は指示に従ってみたが、まだ何もできません。その "Hello World"と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

編集：この回答は、D3Fireに参加することを決定しているため、もはや関連しません。

火災ベースを参照してください。それがデータをロードするのを待ちます。その後、あなたのd3の可視化を描画します。

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

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

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

 
});