有没有办法告诉 crossfilter 将数组元素视为单独的记录而不是将整个数组视为单个键? [英] Is there a way to tell crossfilter to treat elements of array as separate records instead of treating whole array as single key?

问题描述

我有一个数据集，其中一些字段值是数组，我想使用 crossfilter 和 d3.js 或 dc.js 来显示每个值在数据集中出现的次数的直方图.

这是一个例子:

var 数据 = [{"key":"KEY-1","tags":["tag1", "tag2"]},{"key":"KEY-2","tags":["tag2"]},{"key":"KEY-3","tags":["tag3", "tag1"]}];var cf = crossfilter(data);var 标签 = cf.dimension(function(d){ return d.tags;});var tagsGroup = tags.group();dc.rowChart("#chart").renderLabel(真).尺寸(标签).group(标签组).xAxis().ticks(3);dc.renderAll();

和 JSFiddle

这里是代码，以防有人遇到类似问题:

function reduceAdd(p, v) {v.tags.forEach (function(val, idx) {p[val] = (p[val] || 0) + 1;//增加计数});返回 p;}函数reduceRemove(p, v) {v.tags.forEach (function(val, idx) {p[val] = (p[val] || 0) - 1;//递减计数});返回 p;}函数reduceInitial() {返回 {};}变量数据 = [{"key":"KEY-1","tags":["tag1", "tag2"], "date":new Date("10/02/2012")},{"key":"KEY-2","tags":["tag2"], "date": new Date("10/05/2012")},{"key":"KEY-3","tags":["tag3", "tag1"], "date":new Date("10/08/2012")}];var cf = crossfilter(data);var 标签 = cf.dimension(function(d){ return d.tags;});var tagsGroup = tags.groupAll().reduce(reduceAdd, reduceRemove, reduceInitial).value();//hack 使 dc.js 图表工作tagsGroup.all = 函数(){var newObject = [];for (var key in this) {if (this.hasOwnProperty(key) && key != "all") {newObject.push({钥匙:钥匙，值:这个[键]});}}返回新对象；}var 日期 = cf.dimension(function(d){ return d.date;});var dateGroup = date.group();var chart = dc.rowChart("#chart");图表.renderLabel(真).尺寸(标签).group(标签组).filterHandler(函数(维度，过滤器){维度.过滤器(函数(d){返回图表过滤器()！=空?d.indexOf(图表过滤器())> = 0:真；})；//执行过滤回油过滤器；//返回实际的过滤器值}).xAxis().ticks(3);var chart2 = dc.barChart("#chart2");图2.width(500).transitionDuration(800).margins({top: 10, right: 50, bottom: 30, left: 40}).dimension(日期).group(datesGroup).elasticY(真).elasticX(真).round(d3.time.day.round).x(d3.time.scale()).xUnits(d3.time.days).centerBar(真).renderHorizo​​ntalGridLines(true).brushOn(true);dc.renderAll();

I have data set where some of the field values are arrays and I'd like to use crossfilter and d3.js or dc.js to display histogram of how many times each of those values was present in the dataset.

Here's an example:

var data = [
    {"key":"KEY-1","tags":["tag1", "tag2"]},
    {"key":"KEY-2","tags":["tag2"]},
    {"key":"KEY-3","tags":["tag3", "tag1"]}];

var cf = crossfilter(data);

var tags = cf.dimension(function(d){ return d.tags;});
var tagsGroup = tags.group();


dc.rowChart("#chart")
    .renderLabel(true)
    .dimension(tags)
    .group(tagsGroup)
    .xAxis().ticks(3);

dc.renderAll();

And JSFiddle http://jsfiddle.net/uhXf5/2/

When I run that code it produces graph like this:

But what I want is something like this:

To make things even more complicated it would be awesome to be able to click on any of the rows and filter dataset by the tag that was clicked.

Anyone has any ideas how to achieve that?

Thanks, Kostya

解决方案

Solved it myself, here's fiddle with working code http://jsfiddle.net/uhXf5/6/

Here's code in case someone will came across similar problem:

function reduceAdd(p, v) {
  v.tags.forEach (function(val, idx) {
     p[val] = (p[val] || 0) + 1; //increment counts
  });
  return p;
}

function reduceRemove(p, v) {
  v.tags.forEach (function(val, idx) {
     p[val] = (p[val] || 0) - 1; //decrement counts
  });
  return p;

}

function reduceInitial() {
  return {};  
}


var data = [
    {"key":"KEY-1","tags":["tag1", "tag2"], "date":new Date("10/02/2012")},
    {"key":"KEY-2","tags":["tag2"], "date": new Date("10/05/2012")},
    {"key":"KEY-3","tags":["tag3", "tag1"], "date":new Date("10/08/2012")}];

var cf = crossfilter(data);

var tags = cf.dimension(function(d){ return d.tags;});
var tagsGroup = tags.groupAll().reduce(reduceAdd, reduceRemove, reduceInitial).value();
// hack to make dc.js charts work
tagsGroup.all = function() {
  var newObject = [];
  for (var key in this) {
    if (this.hasOwnProperty(key) && key != "all") {
      newObject.push({
        key: key,
        value: this[key]
      });
    }
  }
  return newObject;
}


var dates = cf.dimension(function(d){ return d.date;});
var datesGroup = dates.group();


var chart = dc.rowChart("#chart");
    chart                                                                                       
    .renderLabel(true)
    .dimension(tags)
    .group(tagsGroup)
    .filterHandler(function(dimension, filter){     
        dimension.filter(function(d) {return chart.filter() != null ? d.indexOf(chart.filter()) >= 0 : true;}); // perform filtering
        return filter; // return the actual filter value
       })
    .xAxis().ticks(3);

var chart2 = dc.barChart("#chart2");
    chart2  
    .width(500)
    .transitionDuration(800)
    .margins({top: 10, right: 50, bottom: 30, left: 40})
    .dimension(dates)
    .group(datesGroup)
    .elasticY(true)
    .elasticX(true)
    .round(d3.time.day.round)    
    .x(d3.time.scale())    
    .xUnits(d3.time.days)
    .centerBar(true)
    .renderHorizontalGridLines(true)       
    .brushOn(true);    


dc.renderAll();

这篇关于有没有办法告诉 crossfilter 将数组元素视为单独的记录而不是将整个数组视为单个键?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！