Дыры данных nvd3 в графиках

Я показываю диаграмму с данными в прошлом, представленными барами (наблюдениями), и данными в будущем, представленными линией (прогноз). Это 2 отдельных набора данных.

Ось x использует даты, а ось y использует значение с плавающей запятой.

Моя проблема в том, что, например, есть дыра с линией прогноза в прошлом. Первые данные для наблюдений 5 дней назад. Таким образом, с этой даты и до сих пор у меня нет значений для прогнозов. Если ничего не делать, то линии растянутся на весь график.

Я вручную добавил несколько фальшивых данных, перебрав все данные наблюдений и отправив только данные в прогнозы.

.push({ date: observations.date })

Моя проблема в том, что я все еще вижу всплывающую подсказку для этих данных с NaN

диаграмма

Вот варианты диаграммы

chart: {
    type: "linePlusBarChart",
    focusEnable: false,
    margin: {
        top: 50,
        right: 50,
        bottom: 30,
        left: 70
    },
    xAxis: {
        staggerLabels: true,
        tickFormat: function(d) {
            return dateFormat(new Date(d));
        },
        showMaxMin: false
    },
    y1Axis: {
        tickFormat: function(d) {
            return d3.format('.02f')(d);
        }
    },
    y2Axis: {
        tickFormat: function(d) {
            return d3.format('.02f')(d);
        }
    },
    bars: {
        forceY: [0]
    },
    lines: {
        forceY: [0]
    },
    x: function(d) {
        return d.date.millis;
    },
    y: function(d) {
        return d.value;
    },
    duration: 500
}

Как я могу скрыть эти всплывающие подсказки? Есть ли другой способ заполнить эти пробелы в данных?

ИЗМЕНИТЬ

Я также пытался добавить { date: observations.date, value : null }, но внизу будут отображаться строки со значением 0.

ИЗМЕНИТЬ 2

Я также пытался изменить функцию y

y: function(d) {
    if(d.value === undefined) return null;
    return d.value;
}

Но у меня такая же проблема


javascript d3.js nvd3.js angular-nvd3
person Weedoze    schedule 20.03.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Просто используйте всплывающую подсказку valueFormatter для обработки значений NaN. например вот что я делаю в похожей ситуации.

  multiChart.interactiveLayer.tooltip.valueFormatter((value, i, datum) => {
    if (
      datum.key === keyForActualGreaterThanPredicted ||
      datum.key === keyForActualLessThanPredicted
    ) {
      const diff = Math.abs(datum.data.y0 - datum.data.y1);
      if (diff === 0) {
        return '-';
      }
      return diff;
    }
    return value;
  });
person jeznag    schedule 27.03.2017
comment
Я не могу заставить его работать. Он даже не входит внутрь функции - person Weedoze; 06.04.2017
comment
Какой код вы использовали? Приведенный выше код нельзя копировать, поскольку он зависит от того, как я настроил свою диаграмму, но вы сможете использовать аналогичный подход. - person jeznag; 07.04.2017