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

Question

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

在示例 JSFIDDLE 中，现在有一个数字显示，其中对所有值求和。

是否也可以仅汇总例如类型为"cash"的值？

所以在这种情况下，如果没有选择任何内容，我希望看到数字 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 中用于映射和减少的框架。 dimension 和 group key 函数确定映射到 group bins，group reduce 函数确定如何添加或删除一行数据 to/from a bin。

当您使用 groupAll 时，只有一个 bin。

考虑到这一点，您可以通过将 reduceSum 函数编写为

来按面值计算现金行，并将其他行计算为零

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

Fork of your fiddle.

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

dc.js add up only some values in numberDisplay

crossfilter

dc.js