d3 Zeilen definieren abhängig vom Tage Unterschied zwischen den Daten

Question

Ich habe eine Reihe von Daten, die Daten enthalten, die Diagramme sind mit Punkten (Kreisen) miteinander verbunden gezeichnet und alles ist in Ordnung. Jetzt möchte ich nur die Punkte verbinden, deren Daten um maximal 7 Tage getrennt sind (< = 7).

Ich fand heraus, dass es in defined Funktion eingebaut ist und das ist wahrscheinlich, was ich verwenden muss.

Ich möchte erreichen this.

In dem obigen Beispiel werden die Daten wo keine Zeile sein soll als Null gesetzt, also muss ich es ein wenig anders machen.

Ich sah auch this, aber das ist nicht das, was ich brauche.

Hier ist, was ich bisher habe (ich glaube, ich auf dem richtigen Weg bin, aber ich bin etwas fehlt):

let valueline = d3.line() 
    .defined(function(d) { 
    let nextDate = (resources[d.axis].samples[d.index + 1]) ? resources[d.axis].samples[d.index + 1].date.getTime() : undefined, 
     previousDate = (resources[d.axis].samples[d.index - 1]) ? resources[d.axis].samples[d.index - 1].date.getTime() : undefined, 
     currentDate = d.date.getTime(), 

     //most relevant code from here 

     differenceNext = Math.floor((nextDate - currentDate)/86400000), 
     differencePrevious = Math.floor((currentDate - previousDate)/86400000); 

    if(differencePrevious <= 7 || isNaN(differencePrevious)){ //or use differenceNext 
     return true; 
    } 

    return false; 
    }) 
    .//some more line callbacks (x, y) 

So habe ich versucht, mehrere Kombinationen differencePrevious oder differenceNext, und die Ergebnisse sind unterschiedlich . manchmal sind die Kreise richtig verbunden und manchmal nicht.

Müssen beide Linienindizes, die verbunden werden sollen, true von der definedcallback zurückgegeben werden?

docs

Wirklich brauchen Hilfe zu diesem Thema und würde sehr geschätzt werden.

Answer 1

Ein wenig Problemumgehung wäre, Ihre Daten zu ändern, indem Sie null Werte zwischen Datenpunkten hinzufügen, die weiter als 7 Tage auseinander liegen und dann den gleichen Code für die Zeilengenerierung wie in example verwenden. Ich habe eine Funktion geschrieben, die das für dich tun kann.

function insertNulls(list, maxBreak, acc){ 
     var listCopy = list.slice() // To return a new list 
     listCopy.map((d,i,arr)=> acc(d) - acc(arr[i-1]) > maxBreak ? i : false) 
     .filter(d => d) 
     .reverse() 
     .forEach(d => listCopy.splice(d,0,null)) //insert nulls 
     return listCopy  
    } 

    var foo = [1,2,3,5,6,15,17,25]; 
    console.log(insertNulls(foo,7,function(d){return d})); 
    //[1, 2, 3, 5, 6, null, 15, 17, null, 25] 

Verwenden Sie diese Funktion dann, wenn Sie Daten binden und die ursprünglichen Daten unverändert lassen. Möglicherweise müssen Sie die Accessor-Funktion ändern.

var DAY_IN_MS = 86400000; 
    ... 

    .data(insertNulls(yourData,7,function(d){return d.date.getTime()/DAY_IN_MS})