40

我有数据集，其中一些字段值是数组，我想使用 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/

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

图1

但我想要的是这样的：

在此处输入图像描述

为了让事情变得更加复杂，能够点击任何行并通过点击的标签过滤数据集会很棒。

任何人都知道如何实现这一目标？

谢谢， 科斯蒂亚

4

5 回答 5

35

自己解决了，这里是工作代码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();
于 2013-07-08T14:24:05.870 回答
20

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

如果您希望它响应所有选择，您将创建一个 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/

于 2013-11-24T09:10:58.433 回答
15

我想尝试为 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 期望 group 对象具有 all 方法。Kostya 对该对象进行了修补，使其具有这样的“全部”方法：

// 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”方法，因为 cap 方法要求组对象具有“top”方法。您还可以像这样修补 top 方法：

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

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

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获得

于 2014-07-09T17:18:40.633 回答
7

Jeff 的回答确实有效，但无需跟踪“找到”变量或在找到项目时继续循环。如果 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 方法，这将处理所有情况。

于 2013-12-03T02:49:07.007 回答
3

现在这要容易得多，因为crossfilter并且dc支持数组的维度。有关上下文和示例，请参阅此问题：在 dc.js/crossfilter 中使用数组维度

于 2017-01-19T12:30:30.947 回答