[英]D3 Crossfilter basic example
我刚开始接触 D3 并且非常喜欢crossfilter 库。 我想生成类似的东西,但不是他们的航班数据,我有格式如下的 CSV 数据:row,col,value。
我只想要一个显示值的直方图,以及一个按值字段排序的表。
很难理解他们的例子中发生了什么。
有人可以建议或展示一个非常基本的例子吗?
我遇到了一个很棒的图书馆,它可以为我做这件事。
到目前为止,我遇到的最好的“非常基本”的交叉过滤器示例来自财富前沿工程博客上的一篇文章。
使用 Crossfilter 探索您的多元数据
includes full code
这里还有一个相对简单的例子:
http://bl.ocks.org/phoebebright/3822981
http://bl.ocks.org/phoebebright/raw/3822981/
这个页面有一些很好的入门教程。 https://github.com/mbostock/d3/wiki/Tutorials
D3 的学习曲线非常陡峭,在理解交叉过滤器示例之前,您需要了解以下示例:
前 7 个教程由 D3 作者编写,它将教你这些基本概念。 (第二个是最直观的)Scott Murray 的例子非常容易理解,而且似乎比原来学得更快。 Christophe Viau 的教程简短且学起来最快,但不一定涵盖足够的细节。
我也是 D3 的新手,但发现这个库非常聪明和强大。 祝你好运
希望此链接提供了一个非常基本的示例,可以帮助任何绊倒的人:非常简单的 JS Fiddle 示例
var data = crossfilter([
{date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:20:19Z", quantity: 2, total: NaN, tip: 100, type: "tab"},
{date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
{date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:54:06Z", quantity: 1, total: NaN, tip: null, type: "cash"},
{date: "2011-11-14T17:02:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: null, type: "cash"},
{date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}]);
try {
var total_dimension = data.dimension(function(d) { return d.total; });
var na_records = total_dimension.filter(90).top(Infinity);
var elRecords = $('ul#records');
elRecords.empty();
for (var i = 0; i < na_records.length; i++) {
$('<li>', { text : na_records[i].total}).appendTo(elRecords);
}
} catch (e) {
console.log(e);
}
对于图表,我还建议使用dc.js库进行快速原型设计,因为它具有本机Crossfilter支持。
似乎没有人真正解决问题的“基本示例”部分。 除了一些 RTFM 类型的链接。 我同意这一点很重要,但如果人们像我一样,那么他们希望在投入大量时间在基础知识上之前,作为技术评估的一部分快速制作原型。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.