d3.js - 如何显示前n项的图表?

标签 d3.js dc.js crossfilter

我有一个事件列表,想要显示谁是最重要的参与者(来得更频繁的)

我所做的是一个 rowChart

var dim = ndx.dimension (function(d) {
  if (!d.guest) {
      return "Not mentioned";
  }
  return d.guest;
});

var group = dim.group().reduceSum(function(d) { return 1; });
var graph = dc.rowChart (".topvisitor")
  .margins({top: 0, right: 10, bottom: 20, left: 10})
  .height(300)
  .width(200)
  .cap(10)
  .x(d3.scale.ordinal())
  .elasticX(true)
.ordering(function(d){return -d.value})
  .dimension(dim)
  .group(group);

这种方法可行,但我想删除一个很大的“其他”。我是否滥用 rowChart 来创建 topN 图表?

最佳答案

所以我遵循的路径是首先过滤数据(通过创建一个假组,该假组具有一个新的 all() 函数,该函数返回真实组的 top(n) ):

var group = dim.group().reduceSum(function(d) { return 1; });

var filteredGroup = (function (source_group) {return {
  all:function () {
    return source_group.top(10).filter(function(d) {
      return d.key != "Not mentioned";
     });
  }
};})(group);

对于图表,请使用此组

.group(filteredGroup);

我认为它确实有效,尽管得到了戈登的认可,但仍然感觉有点黑客,但它确实起到了作用(限制+过滤一些数据)

你必须去掉盖子,或者实现顶部功能(与本例中的所有功能相同)

作为旁注:rowChart 似乎是您可以覆盖数据函数的图表之一,因此:

.data(function (group) {
      return group.top(10);
})

也可以(但不会过滤“未提及”的项目

关于d3.js - 如何显示前n项的图表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29916853/

相关文章:

javascript - D3.js - 折线图 : Area path goes over x and y axis on zoom

javascript - D3 : looping transition with dynamic name

javascript - Ghost - 嵌入式 JavaScript 不会触发 d3js

javascript - dc.js 折线图每个点后从零开始

javascript - dc.js 百分比直方图 - 组的大小

javascript - 通过 Flask 服务器上的队列访问 d3.json 对象时出现问题

javascript - D3.js 从单独的文件中绘制多个数据集

javascript - crossfilter.js 和 dc.js 更新回调组更改图表

javascript - DC.js 条形图条形大小调整

javascript - 带序号 x 轴刻度的 dc.js 条形图无法正确呈现