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知道足够的abuot 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。

从Couchdb文档到D3的数据数组

2 个答案: