dc.js d3+crossfilter.top to export filtered data to CSV

Question

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. 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(); }); 

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?

2. 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.

Answer 1

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();

    });