Question

我有一个带有定制减速器的小组，负责计算各种总和平均值。目的是将它们全部显示在同一条形图上。但是我只能显示第一个小节。这是JSFiddler https://jsfiddle.net/71k0guxe/15/

是否可以在条形图上显示所有值？

提前谢谢！

数据

ID,SurveySent,ResponseReceived
1,Yes,No
2,No,No
3,Yes,Yes
4,No,No
5,Yes,Yes
6,No,No
7,Yes,No
8,No,No
9,Yes,No
10,No,No

代码

var chart = dc.barChart("#test");
//d3.csv("morley.csv", function(error, experiments) {
var experiments = d3.csvParse(d3.select('pre#data').text());

  var ndx                 = crossfilter(experiments),
      dimStat        = ndx.dimension(function(d) {return "Statistics";}),
      groupStat       = dimStat.group().reduce(reduceAdd, reduceRemove, reduceInitial);
function reduceAdd(p, v) {
  ++p.count;
  if (v.SurveySent === "Yes") p.sent++;
  if (v.ResponseReceived === "Yes") p.received++;
  return p;
}

function reduceRemove(p, v) {
  --p.count;
  if (v.SurveySent === "Yes") p.sent--;
  if (v.ResponseReceived === "Yes") p.received--;
  return p;
}

function reduceInitial() {
  return {count: 0, sent: 0, received: 0};
}

  chart
    .width(400)
    .height(400)
    .xUnits(dc.units.ordinal)
        .label(function(d) { return d.data.value })
    .elasticY(true)
    .x(d3.scaleOrdinal().domain(["Total", "Sent", "Received"]))
    .brushOn(false)
    .yAxisLabel("This is the Y Axis!")
    .dimension(dimStat)
    .group(groupStat)
    .valueAccessor(function (d) { 
           //Is it possible to return count sent and received all from here?
            return d.value.count;
      })
    .on('renderlet', function(chart) {
        chart.selectAll('rect').on("click", function(d) {
            console.log("click!", d);
        });
    });
    chart.render();

Answer 1

只需从dc.js / wiki / FAQ的FAQ部分中获得一些想法假团体 “ dc.js使用了交叉过滤器API的非常有限的一部分-实际上，它实际上仅使用了Dimension.filter（）和group.all（）。” 我不在乎过滤，因此我只需要标记自己的group.all。基本上将其从一行移到多行。达到我的目的。

/* solution */
var groupStatTranposed = group_transpose(groupStat);

function group_transpose(source_group, f) {
    return {
        all:function () {
            return [
                {key: "Total", value: source_group.all()[0].value.count},
                {key: "Sent", value: source_group.all()[0].value.sent},
                {key: "Received", value: source_group.all()[0].value.received}
            ];           
        }
    };
}
//use  groupStatTranposed in the chart.
/** solution */

在自定义化简器的barChart上显示多个条形图

1 个答案: