使用 YYYY-MM-DD 值的比较构建 D3 时间线
Constructing D3 Timeline Using A Comparison of YYYY-MM-DD Values
在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 结果被丢弃(这也是为什么您丢失的结果会根据您开始排序的一端而改变的原因。
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 我应该如何从xml文件构建一个javascript页面
- 为什么在单独的函数中应用时转换会闪烁/断断续续(D3)
- 如何在DOM元素上按类型构建此函数
- 如何在d3.js中返回路径的y坐标
- d3基于用户选择动态更新节点
- 有条件更新d3.js力图中节点的最佳方法
- Sencha Touch构建-排除文件
- 为什么我的d3.jsselectAll+过滤器没有过滤
- 使用 YYYY-MM-DD 值的比较构建 D3 时间线
- d3.js力布局图:如何从头开始构建nodes对象
- 在Angular中构建一个可重复使用的D3.js图表,其宽度为100%
- D3:如何使用本地JSON数据构建HeatMap
- 如何为d3图形构建准备JSON对象
- d3是构建自由格式图表编辑器的好选择吗?
- ExtJS应用程序构建失败:ReferenceError: d3未定义
- 进口d3.事件转换为使用rollup的自定义构建
- 用D3逐个节点构建图
- 我'我试图通过使用codemmirror编辑器构建D3.js,但我在那里输入的任何东西都不能被D3.js正确地可
- 如何用d3.js只使用一个值来构建稀疏图