关于javascript：dc.js d3 crossfilter.top可以将过滤后的数据导出到CSV


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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    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数据集。我无法解决的问题是如何添加一个能够调用此方法的Export All链接，因为在d3.csv函数闭包的范围之外无法访问此代码区域。我将如何解决此问题？

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

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

    不确定如何解决此问题。任何帮助表示赞赏。

    我通过简单地使用jquery onclick处理程序解决了这个问题。我想我只是需要解决这个问题。还使用download.js触发使用javascript

    进行文件下载

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
         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();

        });