линейный график dc / d3 падает до 0 по оси y после фильтрации

#javascript #d3.js #dc.js

#javascript #d3.js #dc.js

Вопрос:

Когда я применяю фильтр измерений к dc.js на графике есть уродливые линии, где линия резко падает к оси y.

Пример скриншота

Возможно ли в dc / d3 не делать этого, т.е. Я бы ожидал, что график будет больше похож на следующее;

Желаемый

Комментарии:

1. Ну, он рисует данные, которые вы ему предоставляете. Если вы хотите, чтобы в нем отсутствовали определенные части, не предоставляйте ему данные для этого.

Ответ №1:

Вы можете вызывать defined непосредственно на созданной диаграмме dc.

 chart
  .chart((c) ->
    dc.lineChart(c)
      .interpolate('linear')
      .defined((d) ->
        return !isNaN(d.y)
      )
  )
 

Условием !isNan(d.y) может быть все, что вам нравится, которое оценивается как true / false.

Обратите внимание, что d переданный defined объект является объектом d3, и его стоит проверить.

Ответ №2:

Два возможных решения, в зависимости от того, хотите ли вы, чтобы линия была соединена или разделена на секции:

  1. Предварительно отфильтруйте данные так, чтобы вместо групп, сумма которых равна нулю, там вообще не было групп. Это соединит точки с отрезком линии поверх отсутствующих данных. https://github.com/dc-js/dc.js/wiki/FAQ#filter-the-data-before-its-charted
  2. Используется lineChart.defined для размещения пробелов / разрывов в строке, где нет данных. https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#definedvalue