javascript - dc.js d3+crossfilter.top 将过滤后的数据导出到CSV

Question

我广泛查看了代码示例，并且能够调用 crossfilter 的 .top(Infinity) 函数来输出过滤后更新的数据记录。我什至可以使用 .top(n) 调用 d3.csv.format 以获得可下载的字符串化 CSV 输出。但我有几个问题。

1. 我在图表绘制方法中调用 top 和 csv.format 函数，如下所述:

   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-ing 输出，它在我的浏览器控制台中显示为“良好”的 CSV 数据集。我无法弄清楚如何解决的问题是如何添加能够调用此方法的 Export All 链接，因为该代码区域在 范围之外无法访问>d3.csv 函数关闭。 我该如何解决这个问题？

CSV 输出中返回的数据具有重复的行，因为它包含原始 CSV 文件中的列以及在 data.forEach(function(d) 中可见的生成列的句柄{} block 。CSV 输出中的 header 显示如下:

acuityInitial、dayOfWeek、处置、小时、月份、waitTime、年、dtg1、dtg、dtg2、mag、深度、处置

不知道如何解决这个问题。如有任何帮助，我们将不胜感激。

Answer 1

我通过简单地使用 jquery onclick 处理程序解决了这个问题。我想我只需要解决这个问题就可以了。还使用download.js使用 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();

    });