[英]dc.js d3+crossfilter.top to export filtered data to 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. 我对代码示例进行了广泛研究,并且能够调用crossfilter的
.top(Infinity)
函数以在过滤后输出更新的数据记录。 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. 我什至可以使用
d3.csv.format
.top(n)
调用d3.csv.format
以获得可下载的字符串化CSV输出。 But I have a couple issues. 但是我有几个问题。
I am calling the top and csv.format functions in my chart draw method as explained here: 我在图表绘制方法中调用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(); });
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. 现在,我只不过是
console.log
输入输出,它在我的浏览器控制台中显示为一组“漂亮”的CSV数据。 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. 我无法解决的问题是如何添加一个可以调用此方法的
Export All
链接,因为在d3.csv
函数闭包范围之外无法访问此代码区域。 How would I go about making a workaround for this? 我将如何解决此问题?
data.forEach(function(d){}
block. The headers in the CSV output appear as follows: data.forEach(function(d){}
块中可见的生成列的句柄。在CSV输出中显示如下: acuityInitial,dayOfWeek,disposition,hour,month,waitTime,year,dtg1,dtg,dtg2,mag,depth,dispositions
Not sure how to solve this. 不知道如何解决这个问题。 any help is appreciated.
任何帮助表示赞赏。
I solved this by simply using a jquery onclick handler. 我通过简单地使用jquery onclick处理程序解决了这个问题。 I think I just needed to sleep on the problem.
我想我只是需要解决这个问题。 also using download.js to trigger a file download using javascript
还使用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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.