dc.js仅将numberDisplay中的一些值相加

Question

对于numberDisplay，我仅看到将所有值相加的示例。但我想应用一个过滤器，以便只看到某种类型的值。

在示例JSFIDDLE中，现在有一个numberDisplay，其中所有值都被求和。

是否也可以仅汇总其类型为“现金”的值？

因此，在这种情况下，如果未选择任何内容，我希望看到数字6。

谢谢您的帮助。

HTML

<div id="demo1">
<h2>Markers with clustering, popups and single selection</h2>
<i>Renewable energy plants in Bulgaria in 2012</i>
<div class="lineChart"></div>
<div class="pie"></div>
<h5>I want here onlny the total number for type "cash" (nothing selected 6)</h5>
<div class="number_cash"></div>
</div>

<pre id="data">date type    value
  1/1/2020  cash    1
  1/1/2020  tab 1
  1/1/2020  visa    1
  1/2/2020  cash    2
  1/2/2020  tab 2
  1/2/2020  visa    2
  1/3/2020  cash    3
  1/3/2020  tab 3
  1/3/2020  visa    3
 </pre>

JavaScript

    function drawMarkerSelect(data) {
  var xf = crossfilter(data);

  const dateFormatSpecifier = '%m/%d/%Y';
  const dateFormat = d3.timeFormat(dateFormatSpecifier);
  const dateFormatParser = d3.timeParse(dateFormatSpecifier);

  data.forEach(function(d) {
    var tempDate = new Date(d.date);
    d.date = tempDate;
  })


  var groupname = "marker-select";
  var facilities = xf.dimension(function(d) {
    return d.date;
  });
  var facilitiesGroup = facilities.group().reduceSum(d => +d.value);

  var typeDimension = xf.dimension(function(d) {
    return d.type;
  });
  var typeGroup = typeDimension.group().reduceSum(d => +d.value);

  var dateDimension = xf.dimension(function(d) {
    return d.date;
  });
  var dateGroup = dateDimension.group().reduceSum(d => +d.value);

  var minDate = dateDimension.bottom(1)[0].date;
  var maxDate = dateDimension.top(1)[0].date;

  //numberDisplay cash
  var all = xf.groupAll();
  var ndGroup = all.reduceSum(function(d) {
    return d.value; //6
  });

  //numbers
  var number_cash = dc.numberDisplay("#demo1 .number_cash", groupname)
    .group(ndGroup)
    .valueAccessor(function(d) {
      return d;
    });

  var pie = dc.pieChart("#demo1 .pie", groupname)
    .dimension(typeDimension)
    .group(typeGroup)
    .width(200)
    .height(200)
    .renderLabel(true)
    .renderTitle(true)
    .ordering(function(p) {
      return -p.value;
    });

  var lineChart = dc.lineChart("#demo1 .lineChart", groupname)
    .width(450)
    .height(200)
    .margins({
      top: 10,
      bottom: 30,
      right: 10,
      left: 70
    })
    .dimension(dateDimension)
    .group(dateGroup, "total spend")
    .yAxisLabel("Transaction spend")
    .renderHorizontalGridLines(true)
    .renderArea(true)
    .legend(dc.legend().x(1200).y(5).itemHeight(12).gap(5))
    .x(d3.scaleTime().domain([minDate, maxDate]));

  lineChart.yAxis().ticks(5);
  lineChart.xAxis().ticks(4);

  dc.renderAll(groupname);
}

const data = d3.tsvParse(d3.select('pre#data').text());

drawMarkerSelect(data);

CSS

  pre#data {
    display: none;
  }

  .marker-cluster-indiv {
    background-color: #9ecae1;
  }

  .marker-cluster-indiv div {
    background-color: #6baed6;
  }

Answer 1

Crossfilter是一个用于在JavaScript中进行映射和简化的框架。维度和组键功能确定到组箱的映射，组缩减功能确定如何向箱中添加数据或从中删除数据行。

当使用groupAll时，只有一个垃圾箱。

请记住，通过将reduceSum函数编写为，您可以按面值计算现金行，而将其他行计数为零>

  var ndGroup = all.reduceSum(function(d) {
    return d.type === 'cash' ? d.value : 0;
  });
Fork of your fiddle。