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

【问题标题】：Weird x-values when plotting live time series in D3.js在 D3.js 中绘制实时时间序列时出现奇怪的 x 值
【发布时间】：2012-05-01 22:51:22
【问题描述】：

我正在尝试绘制过去 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); });
}

但不幸的是，该点出现在绘图的左侧而不是右侧，当我在 Firebug 中查看 SVG 的源时，该条目有一个奇怪的 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]);

【问题讨论】：

请原谅任何明显的建议，但是 (1) 你是否得到了你对 console.log(x(/*new value*/ - TS + T)) 的期望和 (2) 你是否得到了你对 console.log(/*new value*/ - TS + T) 的期望，当你附加新数据指向data?

标签： javascript d3.js

【解决方案1】：

这里是如何制作情节的分步教程的链接。

Part I, Part II（我猜你读过）

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

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

你确定你有相同 TZ 的时间戳吗？ 2小时的差异会产生这样的效果。或者可能是“新点”不是最近的。

【讨论】：