d3データ日付間の日差に応じて行を定義します

Question

日付を含むデータがたくさんあります。グラフはドット（円）で結ばれており、すべてが問題ありません。今では、最大7日（< = 7）で区切られた日付のドットのみを接続したいと考えています。

私は、definedの機能が組み込まれていることを知りました。これはおそらく私が使用しなければならないものです。

thisを達成したいと思います。

上記の例では、行ではいけないデータはnullに設定されているため、少し違う必要があります。

私もthisを見ましたが、これは私が必要なものではありません。ここで

は私がこれまで持っているものである（私は正しい軌道にだと思うが、私は何かが欠けています）：

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) 

は、だから私は differencePreviousまたは differenceNextを使用して複数の組み合わせを試してみましたが、結果は異なります。サークルが正しく接続されていないことがあります。

接続する必要があり、両方のラインインデックスはtrueがdefinedcallbackから返さを取得する必要がありますか？

docs

本当にこの上で助けを必要としていただければ幸いです。

Answer 1

回避策のビットは、nullの値を7日以上離れたデータポイント間に追加してから、exampleと同じコードを使用してデータを変更することです。私はあなたのためにこれを行うことができる関数を書いた。

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] 

この機能は、データをバインドして元のデータを変更しない場合に使用します。アクセサー機能を変更する必要があるかもしれません。

var DAY_IN_MS = 86400000; 
    ... 

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