d3根據數據日期之間的天差異定義行

我有一堆包含日期的數據，圖表是用點（圓圈）相互連接繪製的，一切都很好。現在，我只想連接最多7天分隔的點（< = 7）。d3根據數據日期之間的天差異定義行

我發現有一個在defined功能的構建，這可能是我必須使用的。我想要實現this。

在上面的例子中，不應該是行的數據被設置爲空，所以我必須做一點不同。

我也看到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

真的需要這種幫助，將不勝感激。

來源

2017-04-27 Olivier Krull

有一種解決方法是修改數據，方法是在間隔超過7天的數據點之間添加null值，然後使用與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})

來源

2017-04-27 08:54:37

Thx爲您的答案，似乎是這樣做的方式，但我仍然不知道如何以及在哪裏必須在我的代碼中實現它。這裏是我正在做的一個簡化的例子，你能否再次花一點時間向我展示我需要把它放在哪裏？ https://jsfiddle.net/rzxa19kq/54/ –

好吧我想我越來越近了，只需要擺脫左上角這個額外的圈子https://jsfiddle.net/rzxa19kq/56/我'我會接受 –

胸腺很多，作品！ https://jsfiddle.net/rzxa19kq/57/ –

d3根據數據日期之間的天差異定義行

回答

相關問題