d c. js складывать только некоторые значения в numberDisplay - PullRequest
Новая
       15

d c. js складывать только некоторые значения в numberDisplay

1 голос
/ 10 апреля 2020

Для numberDisplay я вижу только примеры, в которых все значения суммируются. Но я бы хотел применить фильтр, чтобы видеть только значения определенного типа.

В примере JSFIDDLE теперь есть отображение номера, в котором все значения суммируются.

Можно ли также суммировать только значения, например, типа "ca sh"?

Так что в этом случае я хотел бы видеть число 6, если ничего не выбрано.

Заранее благодарим за помощь.

HTML

<code><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

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;
  }

1 Ответ

2 голосов
/ 10 апреля 2020

Crossfilter - это основа для картирования и сокращения в JavaScript. Функции измерения и групповой клавиши определяют отображение на группы, а функции уменьшения группы определяют, как добавить или удалить строку данных в / из корзины.

Когда вы используете groupAll, есть только один bin.

Имея это в виду, вы можете считать приблизительно sh строк по номиналу и считать другие строки как ноль, записав свою функцию reduceSum как 

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

Вилка твоей скрипки .

...