0

我正在尝试创建一个滑动时间序列。它将在仪表板小部件中使用，它将在最后一分钟跟踪某些内容。

无非就是 X 轴分量。只是为了测试这个功能。

这是代码：

 var now = parseInt(Date.now() / 1000) * 1000;// rounded to second
 var t = 60;
 data = d3.range(60).map(init); // init last minute

 function init() {
     t = t - 1;
     return {
         time: now - t * 1000,
         value: 0
     };
 }

 setInterval(function () {
     data.shift();
     data.push({
         time: parseInt(Date.now() / 1000) * 1000,
         value: Math.random() * 200
     });
     redraw();
 }, 1000);

 var margin = { top: 20, right: 20, bottom: 50, left: 50 };
 var width = 800 - margin.left - margin.right;
 var height = 300 - margin.top - margin.bottom;

 var x = d3.time.scale()
  .domain([now - 60 * 1000, now])
  .range([0, width]);

 var xAxis = d3.svg.axis().scale(x)
 .orient("bottom").ticks(d3.time.second, 5);

 var svg = d3.select("body").append("svg")
     .attr("class", "chart")
     .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom)
     .append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 svg.selectAll("rect")
     .data(data);

 //xaxis
 var axis = svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis);

 function redraw() {

     now = parseInt(Date.now() / 1000) * 1000;
     x.domain([now - 60 * 1000, now]);

     axis.transition()
     .duration(1000)
     .ease("linear")
 .call(xAxis);
 }

事件如果不完美，它工作得很好，但我可能存在与仪表板组件相关的内存问题。

即使不再可见，一些刻度仍保留在 svg 中。几分钟后，我们可以看到额外的组/刻度。

例子

小提琴在这里可用。

我的代码有什么问题？我误解了什么吗？

谢谢，

4

0 回答 0