使用 YYYY-MM-DD 值的比较构建 D3 时间线

Constructing D3 Timeline Using A Comparison of YYYY-MM-DD Values

本文关键字:构建 D3 时间线 比较 YYYY-MM-DD 使用      更新时间:2023-09-26

在D3中,我正在努力自定义并添加到这个时间线:由Rengel Rengel http://bl.ocks.org/rengel-de/5603464。一切都很顺利,直到最近我在从 JSON 数据集显示时间轴上的所有事件时遇到问题。它没有显示 1970-1953 年,而是仅显示 1966-1953 年。

D3 仅显示来自 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();
        }
    }

在调试时,我可以看到更改"result"变量的值会产生不同的布局,所以这就是为什么我认为它没有正确计算日期。所以我尝试了许多其他方法来比较日期,但还没有运气。(实际上,在一种情况下,从 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));

如何显示所有矩形,而不是仅从数据集的一半开始的结果?

提前谢谢。

日期无关,因为多亏了那个全副武装和可操作的 jsfiddle 的力量,你的问题是这样的:

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

应该是

vis.selectAll ("g.rectclass")

g:not(.xaxis)仅排除轴,而不排除保存轴标签的子 g 元素。因此,您的第一个 X 数据点将连接到保存这些标签的这些 g 元素。由于它们已经存在,因此它们不会被 .enter() 子句拾取,并且您的第一个 X 结果被丢弃(这也是为什么您丢失的结果会根据您开始排序的一端而改变的原因。