1

我在集成 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},

任何想法，将不胜感激。

4

2 回答 2

2

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

高温高压

于 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）将默认拒绝此类（跨域）请求，除非请求的域明确允许它。

基本上有两种解决方案：

  • 提供来自同一域的数据和页面，或者通过

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

    • 直接从 CouchDB 提供静态文件

  • 或者通过允许跨域资源共享，这在 CouchDB 1.3 版本中可用。您可以在 CORS 上的 CouchDB 文档中找到相关设置的列表。

于 2013-10-19T10:52:21.573 回答