D3.js现在开始计时
[英]D3.js Time scale starting at now
问题描述
我有一个图表，显示过去90分钟内的实时数据，目前，我的x轴使用标记为90到0
xRRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right])
.domain([90,0])
我想做的是将数字0-90替换为时间，即90将是now-90，而0将是now我尝试了以下操作，但它无法绘制轴，任何我出错的想法
var xStart = Math.round(+new Date()/1000);
var xEnd = xStart - (60*90);
xTRange = d3.scale.time().range([MARGINS.left, WIDTH - MARGINS.right])
.domain([xEnd, xStart])
.nice()
xTAxis = d3.svg.axis().scale(xTRange)
.tickSize(20)
.tickSubdivide(true);
vis.append('svg:g').attr('class', 'x axis')
.attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')')
.call(xTAxis);
2 个解决方案
解决方案1
1 2015-08-15 14:41:27
您似乎已经交换了xEnd和xStart。 在第一个代码块中，较小的值位于末尾。 在第二个中，较大的值位于末尾。
同样，您的第一行将xStart和xEnd值转换为秒。 您不会在domain调用中将它们转换回毫秒。 当d3将其强制转换为日期时，它们将不会达到您的期望（会小得多）
解决方案2
0 2015-08-15 17:10:16
正如@potatopeelings的最佳答案所言，JavaScript的工作时间为毫秒。 另外，还有其他几件事。 它是d3.time.scale ，而不是d3.scale.time 。 在比例分配中，您需要反转xEnd和xStart 。
这一切都在工作：
<!DOCTYPE html> <html> <head> <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> </head> <body> <script> var vis = d3.select('body') .append('svg') .attr('width', 400) .attr('height', 150); var xStart = new Date(); var xEnd = xStart - (90 * 60000); // 60,000 milliseconds in minute xTRange = d3.time.scale() .range([20, 380]) .domain([xStart, xEnd]) .nice(); xTAxis = d3.svg.axis().scale(xTRange) .tickSize(20) .tickSubdivide(true); vis.append('svg:g').attr('class', 'x axis') .attr('transform', 'translate(0,' + 10 + ')') .call(xTAxis); </script> </body> </html>
D3.js y轴时间刻度
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.