Question

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

以下是一个例子：

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

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

当我运行该代码时，它生成如下图形：

graph1

但我想要的是这样的：

enter image description here

为了使事情变得更加复杂，能够通过点击的标签点击任何行和过滤数据集将是非常棒的。

任何人都有任何想法如何实现？

谢谢，克斯特亚

Answer 1

我自己解决了这个问题，这里有工作代码http://jsfiddle.net/uhXf5/6/

以下是有人会遇到类似问题的代码：

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

Answer 2

上面的例子是一个很好的方法。你可以更进一步。在上面的解决方案中，它只会根据您的第一个选择进行过滤。任何后续选择都将被忽略。

如果您希望它响应所有选择，您可以按如下方式创建filterHandler：

 barChart.filterHandler (function (dimension, filters) {
   dimension.filter(null);   
    if (filters.length === 0)
        dimension.filter(null);
    else
        dimension.filterFunction(function (d) {
            for (var i=0; i < d.length; i++) {
                if (filters.indexOf(d[i]) >= 0) return true;
            }
            return false; 
        });
  return filters; 
  }
);

这里的工作示例： http://jsfiddle.net/jeffsteinmetz/cwShL/

Answer 3

我想尝试为Jeff和Kostya列出的方法提供一些背景信息。

您会注意到tagsGroup使用groupAll与典型的group方法不同。 Crossfilter告诉我们“返回的对象类似于标准分组，除了它没有top或order方法。而是使用value来检索所有匹配记录的reduce值。” Kostya调用“.value（）”方法来检索代表整个组的单个对象。

var tagsGroup = tags.groupAll().reduce(reduceAdd, reduceRemove, reduceInitial).value();

此对象不适用于dc.js，因为dc.js期望组对象具有all方法。克斯特亚修补了这个对象，有一个像这样的“全部”方法：

// 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;
}

这将适用于简单的dc.js图表，但您将无法使用所有dc.js功能，因为并非所有组功能都存在。例如，您将无法在图表上使用“上限”方法，因为cap方法期望组对象具有“顶部”方法。你也可以像这样修补top方法：

topicsGroup.top = function(count) {
    var newObject = this.all();
     newObject.sort(function(a, b){return b.value - a.value});
    return newObject.slice(0, count);
};

这将使您的图表能够使用上限方法：

barChart
    .renderLabel(true)
    .height(200)
    .dimension(topicsDim)
    .group(topicsGroup)
    .cap(2)
    .ordering(function(d){return -d.value;})
    .xAxis().ticks(3);

http://jsfiddle.net/djmartin_umich/m7V89/#base

提供了更新的示例

Answer 4

杰夫的回答确实有效，但是如果找到了一个项目，则无需跟踪“找到”变量或继续循环。如果X在[X，Y，Z]中，则已经减少了1/3的迭代量。

else
    dimension.filterFunction(function (d) {
        for (var i=0; i < d.length; i++) {
            if (filters.indexOf(d[i]) >= 0) return true;
        }
        return false; 
    });

或者，您可以修补dc.js filterFunction方法，并处理所有情况。

Answer 5

现在这更容易，因为crossfilter和dc支持数组维度。有关上下文和示例，请参阅此问题：Using dimensions with arrays in dc.js/crossfilter

有没有办法告诉crossfilter将数组元素视为单独的记录而不是将整个数组视为单个键？

5 个答案: