dc.js d3+crossfilter.top 将筛选后的数据导出到 CSV

Question

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

我在图表绘制方法中调用顶部和 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();

});

我删除了一些图表以保存 space。我最重要的问题是关于调用此导出数据调用。现在我只是 console.log-ing 输出，它在我的浏览器控制台中显示为 "nice" CSV 数据集。我无法弄清楚如何解决的问题是如何添加一个 Export All link 来调用这个方法，因为这个代码区域在 [= 的范围之外是不可访问的18=] 函数关闭。 我该如何解决这个问题？

CSV 输出中 returns 的数据具有重复的行，因为它包括原始 CSV 文件中的列以及在 data.forEach(function(d){} 中可见的生成列的句柄堵塞。 CSV 输出中的 headers 如下所示：

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

不确定如何解决这个问题。感谢您的帮助。

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

    });

dc.js d3+crossfilter.top 将筛选后的数据导出到 CSV

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

javascript

d3.js

crossfilter

dc.js