在 D3.js 中绘制实时时间序列时奇怪的 x 值

Weird x-values when plotting live time series in D3.js

本文关键字：时间序列 js D3 绘制 实时      更新时间：2023-09-26

我正在尝试绘制过去 2 小时的时间序列，只是一堆带有时间戳和值的点。 例如 {time: 1234234553, value: 34}

当一个新点到达时，我会将其推到列表的末尾data

并重新分配列表中的所有内容：

function redraw() 
{
    var TS = new Date().getTime(); // current time stamp
    var T = (60*60*2*1000); // last two hours
    chart.selectAll("rect")
     .data(data)
   .enter().append("rect")
     .attr("x", function(d, i)   { return x(d.time - TS + T); })
     .attr("y", function(d)      { return H - y(d.value); })
     .attr("width", function(d)  { return 2; })
     .attr("height", function(d) { return y(d.value); });
}

但不幸的是，该点出现在绘图的左侧而不是右侧，当我查看 SVG 的 Firebug 源代码时，该条目有一个奇怪的 x 值：

<rect x="function (){}" y="354.9553019925952" width="2" height="45.044698007404804"/>

谁能帮忙？我是否需要删除所有绘制的数据并重新绘制？

附录：

如果您需要查看 x（） 和 y（）

var T = (60*60*2*1000); // 1 hurs
var x = d3.scale.linear()
        .domain([0, T])
        .range([0, W]);
var y = d3.scale.linear()
        .domain([d3.min(data, function(d) { return d.value; }), 10])
        .range([0, H]);

这是有关如何制作绘图的分步教程的链接。

第一部分，第二部分（我猜你读过）

我认为只有当你给出错误的"x"位置时，新的矩形才能在左边。

这个return x(d.time - TS + T);看起来不错。所以我认为，d.time和TS的某个地方存在问题。

您是否担心您拥有具有相同 TZ 的时间戳？2小时的差异将产生这样的效果。或者可能是"新点"不是最近。

相关文章：