从 Couchdb 文档到 D3 的数据数组

Question

我在集成 Couchdb 和 D3 时遇到问题。 D3 是一个执行文档驱动数据可视化的 Javascript 库。 Couchdb 是一个文档数据库。它们是为彼此而生的。

D3 将数据数组绑定到网页的 DOM 元素。在我在网上或书中看到的大多数示例中，人们都在处理静态数据集。通常，示例将显示写入 Javascript 的数组或加载到页面中的 text.csv 文件。

我想直接从数据库文档中获取数据并将其加载到 D3 中。我不确定该怎么做。我在网上看到一个例子，一个人将他们所有的数据作为一个数组加载到一个 couchdb 文档中，然后通过 couchdb.jquery 调用将数据带入 index.html：

/ 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},

任何想法都将不胜感激。

Answer 1

https://gist.github.com/anonymous/9275891 的第四部分有一个我认为你会喜欢的例子。您根本不需要依赖 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

Answer 2

如果嵌入 D3 代码的页面不是来自与 CouchDB 相同的域（+ 端口），则必须启用跨域资源共享。

假设您的页面位于http://example.com/data.html，其中包含从http://db.example.com/ 或http://example.com:5984/ 访问数据的JavaScript D3 代码。在这种情况下，您的浏览器（正在执行 JavaScript）将默认拒绝此类（跨域）请求，除非请求的域明确允许。

基本上有两种解决方案：

• 提供来自同一域的数据和页面，无论是通过

  • 在两者之间放置一个反向代理，将资源映射到上游服务器（例如，/couch 到您的 CouchDB 服务器，其他所有内容到您的 Web 服务器）

  • 直接从 CouchDB 提供静态文件

• 或通过允许跨域资源共享，从 1.3 版开始在 CouchDB 中可用。您可以找到相关设置列表in the CouchDB docs on CORS。