1

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

1 回答 1

0

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

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

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

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

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

于 2012-05-17T05:08:44.340 回答