nvd3 trous de données dans les graphiques

Question

J'affiche un graphique avec des données dans le passé représenté par des barres (observations) et des données dans le futur représenté par une ligne (prévision). Ce sont deux ensembles de données séparés.

L'axe des x utilise des dates et l'axe des y utilise une valeur flottante.

Mon problème est que, par exemple, il y a un trou avec la ligne de prévision dans le passé. Les premières données pour les observations datent de 5 jours. Donc à partir de cette date jusqu'à maintenant, je n'ai pas de valeurs pour les prévisions. Si je ne fais rien, les lignes seront étendues à toutes les cartes.

J'ai ajouté manuellement quelques données fausses en itéraçant toutes les données d'observation et en poussant les données uniquement vers les prévisions.

.push({ date: observations.date }) 

Mon problème est que je vois encore une info-bulle pour les données avec NaN

Voici les options du tableau

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 
} 

Comment puis-je cacher les infobulle ? Existe-t-il un autre moyen de combler ces trous de données?

EDIT

J'ai aussi essayé d'ajouter { date: observations.date, value : null } mais il affiche les lignes en bas avec la valeur 0.

EDIT 2

J'ai aussi essayé de changer la fonction y

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

Mais j'ai le même problème

Answer 1

Il suffit d'utiliser l'info-bulle valueFormatter pour gérer les valeurs NaN. par exemple. voici ce que je fais dans une situation similaire.

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