1

Couchdb と D3 の統合に問題があります。D3 は、ドキュメント駆動型のデータ視覚化を実行する Javascript ライブラリです。Couchdb はドキュメント データベースです。彼らはお互いのために作られました。

D3 は、データの配列を Web ページの DOM 要素にバインドします。Web や本で見たほとんどの例では、人々は静的データ セットに取り組んでいます。通常、例では、Javascript に書き込まれた配列、またはページに読み込まれた text.csv ファイルを示します。

データベース ドキュメントから直接データを取得し、D3 にロードしたいと考えています。私はそれを行う方法が不明です。Web で、ある人がすべてのデータを配列として 1 つのcouchdb ドキュメントにロードし、couchdb.jquery 呼び出しでデータを index.html に取り込む例を 1 つ見たことがあります。

/ This function replaces the d3.csv function.
  $.couch.db("d3apps3").openDoc("sp500", {
      success : function (doc) {

          var data = doc.data;

          data.forEach(function(d) {
              d.date = formatDate.parse(d.date);
              d.price = +d.price;
          })

私はdb.allDocsで似たようなことを試しました:

 <script type="text/javascript">
            $dbname = "dataset2";
            $appname = "dataset2";
            $db = $.couch.db("dataset2");
            $db.allDocs({
                success: function (data) {
                   console.log(data)
                }
             });
        </script>

console.log にレンダリングするデータを取得できましたが、D3 と index.html に取得できませんでした。また、db.allDocs から生成されるデータストリームは、各ドキュメントの _id と _rev に限定されていることにも気付きました。

また、d3.json 呼び出しを使用して Couchdb ビューからデータを取得しようとしました。d3.json は既存の .json ファイルを探しているため、これは機能しません。

面白いことに、GET コマンドを使用して cURL でビューを呼び出し、データストリームを表示できますが、D3 にバインドできないようです。

~$ curl -X GET http://anywhere.com:5984/dataset2/_desing/list_view/_view/arnold

{"total_rows":25,"offset":0,"rows":[
{"id":"dataset.csv1","key":"0","value":null},
{"id":"dataset.csv2","key":"1","value":null},
{"id":"dataset.csv11","key":"10","value":null},
{"id":"dataset.csv12","key":"11","value":null},

どんなアイデアでも大歓迎です。

4

2 に答える 2

2

https://gist.github.com/anonymous/9275891のパート 4 には、あなたが気に入ると思う例があります。jquery.couchdb ライブラリにまったく依存する必要はありません。d3 は、すぐに使用できる http と json を十分に認識しています。関連するコードは次のとおりです。

d3.json("_view/pricetimeseries", function(viewdata) {
  // We just want rows from the view in the visualisation
  data = viewdata["rows"];
  data.forEach(function(d) {
    // the key holds the date, in seconds
    d.date = new Date(d.key);
    d.price = +d.value;
  });
// rest of the visalisation code

HTH

于 2014-06-10T10:26:39.547 に答える
1

D3 コードが埋め込まれているページが CouchDB と同じドメイン (+ ポート) から提供されていない場合は、クロスオリジン リソース共有を有効にする必要があります。

あなたのページがhttp://example.com/data.htmlにあり、これにはhttp://db.example.com/またはhttp://example.com:5984/からデータにアクセスする JavaScript D3 コードが含まれているとします。その場合、(JavaScript を実行している) ブラウザーは、要求されたドメインが明示的に許可しない限り、デフォルトでそのような (クロスオリジン) 要求を拒否します。

これには基本的に 2 つの解決策があります。

  • 次のいずれかの方法で、同じドメインからデータとページの両方を提供します。

    • 間にリバース プロキシを配置して、リソースをアップストリーム サーバーにマップします (たとえば/couch、CouchDB サーバーに、その他すべてを Web サーバーに)。

    • CouchDB から直接静的ファイルを提供する

  • または、バージョン 1.3 以降の CouchDB で利用できる Cross-Origin Resource Sharing を許可することによって。関連する設定のリストは、CORS の CouchDB ドキュメントにあります。

于 2013-10-19T10:52:21.573 に答える