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.