使用YYYY-MM-DD值的比較構造D3時間軸

在D3中，我正在定製並添加到此時間軸：http://bl.ocks.org/rengel-de/5603464 by rengel Rengel。直到最近，我一直有問題顯示我的JSON數據集中的時間線上的所有事件。從1970 - 1953年開始，它只顯示1966 - 1953年。使用YYYY-MM-DD值的比較構造D3時間軸

D3 Only Showing Partial Results from JSON

我在我的JSON文件日期是YYYY-MM-DD格式，我鋪設的軌道使用的時間表。該功能將元素附加到這些軌道中，並將結果從晚到早排序（參見下面的代碼）。但由於某種原因，如果我將這些JSON結果向後排序，我的日期只能在1966年開始，如果我向前排序（），它們只會從對面一半開始（1958年）。我一直在想這是因爲日期計算不正確。

這裏是compareDescending功能檢查每對日期：

function compareDescending(item1, item2) { 
    // Every item must have two fields: 'start' and 'end'. 
    // Read the dataset in and then compare the dates of the first value with the next value 

     var firstdatestartdesc = new Date(item1.DateStart); 
     var seconddatestartdesc = new Date(item2.DateStart); 

     // later first 
     var result = new Date(item1.DateStart) - new Date(item2.DateStart) ; 

     if (result < 0) { return 1; } 
     if (result > 0) { return -1; } 

     return 0; 

     var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds 
     var firstdatefinishdesc = new Date(item1.DateFinish); 
     var seconddatefinishdesc =new Date(item2.DateFinish); 


     result = new Date(item2.DateFinish) - new Date(item1.DateFinish); 

     if (result < 0) { return 1; } 
     if (result > 0) { return -1; } 

     return 0; 
}

然後我用calculateTracks功能是通過排序：

function calculateTracks(item, sortOrder, timeOrder) { 
     var i, track; 

     sortOrder = sortOrder || "descending"; // "ascending", "descending" 
     timeOrder = timeOrder || "backward"; // "forward", "backward" 

     function sortBackward() { 
      // older items end deeper 
      data.projects.forEach(function (item) {/
       for (i = 0, track = 0; i < tracks.length; i++, track++) { 
        if (item.DateFinish < tracks[i]) { break; } 

       } 
       item.track = track 
       tracks[track] = item.DateStart; 
      }); 
     } 

     //won't need to use this when we have sort backward instead 
     function sortForward() { 
      // younger items end deeper 
      data.projects.forEach(function (item) { 
       for (i = 0, track = 0; i < tracks.length; i++, track++) { 
        if (item.DateStart > tracks[i]) { break; } 
       } 
       item.track = track; 
       tracks[track] = item.DateFinish; 
      }); 
     } 

     if (sortOrder === "ascending") 
      data.projects.sort(compareAscending); 
     else 
      data.projects.sort(compareDescending); 
     if (timeOrder === "forward"){ 
      ; 
      sortForward(); 
     }else{ 
      sortBackward(); 
     } 
    }

在調試這個問題，我可以看到改變「結果」變量的值會產生不同的佈局，所以我認爲它不能正確計算日期。所以我嘗試了很多其他的方式來比較日期，但沒有運氣。（實際上，在一種情況下，從1970年到1953年顯示的矩形，但不是在通道中「堆疊」，每個矩形都添加到前一個矩形的下方，但矩形結束在x軸的下方而沒有正確堆疊。提前

var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds 
var result = Math.round(firstdatestartdesc.getTime() - seconddatestartdesc.getTime()); 
var result = Math.round(Math.round(firstdatestartdesc - seconddatestartdesc)/(oneDay)); 
var result = Math.round((firstdatestartdesc - seconddatestartdesc)/(oneDay)); 
var result = Math.round((firstdatestartdesc - seconddatestartdesc)/(oneDay));

我怎麼可能會得到所有的矩形顯示，而不是啓動只能通過數據集中途結果

感謝

來源

2016-04-26 rootseire

stick your代碼在工作jsfiddle與一些數據，那麼我們都可以有一個關於 – mgraham

捅我在這裏創建了一個小提琴：https://jsfiddle.net/rootseire/t1vrbLc4/7/但尚未設置json對象。但是有一個PHP服務的鏈接，並且前10個結果存儲在d3.json調用之上的變量中。我會繼續嘗試讓它工作，但希望在此期間有所幫助。謝謝 – rootseire

@ rootseire - 你被告知可憐的建議。在這裏發佈代碼作爲可運行剪切。鏈接不會永遠持續下去，許多鏈接也不會遵循鏈接。請注意，在'new Date（item1）中使用Date構造函數解析字符串。DateStart）''不推薦，手動解析字符串（一個庫可能會有幫助，但2行函數就足夠了）。「YYYY-MM-DD」中的字符串將在當前瀏覽器中解析爲UTC，或者在某些稍舊的瀏覽器中爲本地解析，或者在此之前爲無效日期。 – RobG

無：進行了嘗試，結果變量？與日期有關，感謝那個全副武裝和可操作的jsfiddle的力量，你的問題就是這個：

vis.selectAll ("g:not(.xaxis)")

應該

vis.selectAll ("g.rectclass")

g:not(.xaxis)僅排除x軸，但不是抱軸標籤的孩子摹元素。因此，您的第一個X數據點將加入到這些包含這些標籤的g元素中。由於它們已經存在，它們不會被.enter（）子句拾取，並且您的第一個X結果被丟棄（這也是爲什麼您的缺失結果會根據您開始從哪個末端進行排序而更改的原因。）

來源

2016-04-27 11:34:54 mgraham

這工作了一個款待@mgraham，提醒我也退後一步從代碼，謝謝百萬:-) – rootseire

使用YYYY-MM-DD值的比較構造D3時間軸

回答

相關問題