dc.js d3 + crossfilter.top将导出的过滤数据导出为CSV [英] dc.js d3+crossfilter.top to export filtered data to CSV

问题描述

我已经详细地查看了代码示例，并且已经能够调用crossfilter的 .top（Infinity）函数在过滤后输出更新的数据记录。我甚至能够调用 d3.csv.format 与 .top（n）为了得到一个字符串' ified CSV输出可以下载。但我有几个问题。

I have looked extensively at code samples and have been able to call crossfilter's .top(Infinity) function to output the updated data records after filtration. I am even able to call d3.csv.format with .top(n) in order to get a string'ified CSV output that can be downloaded. But I have a couple issues.

1. 我在我的图表绘制方法中调用top和csv.format函数：

1. I am calling the top and csv.format functions in my chart draw method as explained here:

d3.csv("/data/acuityData.csv", function (data) {

 // format our data
 var dtgFormat = d3.time.format("%Y-%m");
 var dtgFormat2 = d3.time.format("%a %e %b %H:%M");

data.forEach(function(d) {
d.dtg1=d.dayOfWeek;
d.dtg= dtgFormat.parse(d.year+"-"+d.month);
d.dtg2=d.year;
d.mag= d.acuityInitial;
d.depth= d.waitTime;
d.dispositions= d.disposition;

});


 // Run the data through crossfilter and load our 'facts'
var facts = crossfilter(data);
var all = facts.groupAll();
 // for wait time
 var depthValue = facts.dimension(function (d) {
   return d.depth;
 });
 var depthValueGroup = depthValue.group();  
 depthChart.width(930)
    .height(150)
    .margins({top: 10, right: 10, bottom: 20, left: 40})
    .dimension(depthValue)
    .group(depthValueGroup)
    .transitionDuration(500)
    .centerBar(true)    
    .gap(1)  
    .x(d3.scale.linear().domain([0, 500]))
    .elasticY(false)
    .xAxis().tickFormat(function(v) {
      console.log(d3.csv.format(depthValue.top(500)));
    return v;});
dc.renderAll();

});

我删除了一些图表以节省空间。我最重要的问题是调用此导出数据调用。现在我只是 console.log - 输出，它在我的浏览器控制台中显示为一个好的CSV数据集。我不能找出如何解决的问题是如何添加一个导出所有链接，将能够调用此方法，因为这个区域的代码是不可访问的函数闭包的范围。 d3.csv 我将如何解决此问题？

I have removed some charts to save space. My most important question is about calling this export data call. For now I simply am console.log-ing the output and it appears as a "nice" CSV set of data in my browser console. The problem I am not able to figure out how to solve is how to add an Export All link that would be able to call this method, as this area of code is inaccessible outside the scope of the d3.csv function closure. How would I go about making a workaround for this?

1. CSV输出具有重复的行，因为它包括原始CSV文件中的列以及在 data.forEach（function（d）{} block。CSV输出中的标题显示如下：



1. The data that returns in the CSV output has duplicated rows, as it is including the columns in the original CSV file as well as the handles for generated columns which are visible in the data.forEach(function(d){} block. The headers in the CSV output appear as follows:

acuityInitial，dayOfWeek，disposition ，hour，month，waitTime，year，dtg1，dtg，dtg2，mag，depth，dispositions

不知道如何解决这个问题

Not sure how to solve this. any help is appreciated.

推荐答案

我通过简单地使用一个jquery onclick处理程序解决了这个问题，我想我只是需要睡觉的问题。还可以使用 download.js 使用javascript触发文件下载

I solved this by simply using a jquery onclick handler. I think I just needed to sleep on the problem. also using download.js to trigger a file download using javascript

     depthChart.width(930)
        .height(150)
        .margins({top: 10, right: 10, bottom: 20, left: 40})
        .dimension(depthValue)
        .group(depthValueGroup)
        .transitionDuration(500)
        .centerBar(true)    
        .gap(1)  
        .x(d3.scale.linear().domain([0, 500]))
        .elasticY(false)
        .xAxis().tickFormat(function(v) {
         //function triggered onClick by element from DOM
             $("#exportData").unbind().click(function() {
                  download(d3.csv.format(depthValue.top(500))."exportedData.csv")
              });
        return v;});
    dc.renderAll();

    });

这篇关于dc.js d3 + crossfilter.top将导出的过滤数据导出为CSV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！