dc.js - 如何在 dc.js numberDisplay 中获取动态字段计数?

标签 dc.js crossfilter

我目前正在尝试弄清楚如何使用 DJ.js 和 D3.js 计算要显示的唯一记录数

数据集如下所示:

id,name,artists,genre,danceability,energy,key,loudness,mode,speechiness,acousticness,instrumentalness,liveness,valence,tempo,duration_ms,time_signature
6DCZcSspjsKoFjzjrWoCd,God's Plan,Drake,Hip-Hop/Rap,0.754,0.449,7,-9.211,1,0.109,0.0332,8.29E-05,0.552,0.357,77.169,198973,4
3ee8Jmje8o58CHK66QrVC,SAD!,XXXTENTACION,Hip-Hop/Rap,0.74,0.613,8,-4.88,1,0.145,0.258,0.00372,0.123,0.473,75.023,166606,4

数据集中有 100 条记录,对于唯一艺术家的计数,我希望计数显示 70。

var ndx = crossfilter(spotifyData);
totalArtists(ndx);

....

function totalArtists(ndx) {
    // Select the artists
    var totalArtistsND = dc.numberDisplay("#unique-artists");
    // Count them
    var dim = ndx.dimension(dc.pluck("artists"));
    var uniqueArtist = dim.groupAll();
    totalArtistsND.group(uniqueArtist).valueAccessor(x => x);

    totalArtistsND.render();
}

结果我只得到了 100,而我应该得到 70。

非常感谢,任何帮助将不胜感激

最佳答案

您走在正确的轨道上 - groupAll 对象通常是与 dc.numberDisplay 一起使用的正确对象。

然而,dimension.groupAll不使用维度的键函数。与任何 groupAll 一样,它查看所有记录并返回一个值; dimension.groupAll()crossfilter.groupAll() 的唯一区别是前者不观察维度的过滤器,而后者观察所有过滤器。

如果您打算使用 dimension.groupAll,则必须编写 reduce 函数来监视行的添加和删除,并记录它有多少独特的艺术家见过。听起来有点乏味,而且可能有问题。

相反,我们可以编写一个“假 groupAll”对象,其 .value() 方法返回一个根据当前过滤器动态计算的值。

普通的组对象已经有一个唯一的计数:bins的数量。所以我们可以创建一个假的 groupAll 来包装一个普通的组并返回 group.all() 返回的数组的长度:

function unique_count_groupall(group) {
  return {
    value: function() {
      return group.all().filter(kv => kv.value).length;
    }
  };
}

请注意,我们还必须在计数之前过滤掉所有值为零的 bin。

像这样使用假的groupAll:

var uniqueArtist = unique_count_groupall(dim.group());

Demo fiddle .

我刚刚添加了这个 to the FAQ .

关于dc.js - 如何在 dc.js numberDisplay 中获取动态字段计数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58321985/

相关文章:

javascript - 每天使用 dc.js 进行规模化

javascript - dc.js - 重新排列行图中的标签

javascript - dc.js 中的 numberDisplay 显示行图表中值的总和

javascript - 如何使用crossfilter和DC.js处理缺失数据?

javascript - 防止在 dc.js 条形图上进行过滤,直到发生鼠标弹起事件

javascript - 如何使用 dc.js 创建堆积条形图?

dc.js - 使用 crossfilter/dc.js 绘制区域归一化条形图的有效方法?

javascript - 动态创建和链接 dc.js 图表

javascript - 如何在 dc.js 中禁用 rowChart 上的点击事件

d3.js - dc.js - 动态更改折线图中堆叠层的 valueAccessor 并重绘它