Question

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

Answer 1

这是一个指导如何制作情节的分步教程的链接。

Part I ， Part II （我猜你看过了）

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

这return x(d.time - TS + T);看起来不错。所以我认为，问题在d.time＆amp; TS。

您是否确定自己拥有相同TZ的时间戳？ 2小时的差异会产生这样的效果。或者可能是“新点”不是很近。

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

1 个答案: