D3.js Шкала времени, начиная с ныне

У меня есть график, который показывает реальные данные за последние 90 минут в настоящее время моя ось х меченых 90 до 0, используяD3.js Шкала времени, начиная с ныне

xRRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]) 
          .domain([90,0])

То, что я хочу сделать, это заменить номера 0 - 90 со временем, то есть 90 будет теперь 90 и 0 бы сейчас я попытался следующие, но не в состоянии сделать ось, любые идеи, где я пошло не

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);

источник

2015-08-15 Steven

Вы, кажется чтобы поменять местами xEnd и xStart. В вашем первом блоке кода меньшее значение находится в конце. В вашем втором, более крупные значения находятся в конце.

Кроме того, ваша первая строка преобразует значения xStart и xEnd в секунды. Вы не конвертируете их в миллисекунды в свой domain звонок. Когда d3 принуждает их к датам, они не будут такими, какие вы ожидаете (будет намного меньше)

источник

2015-08-15 14:41:27 potatopeelings

Как и в случае с отличными ответами, javascript работает с миллисекундами. Кроме того, пара других вещей. Это d3.time.scale, а не d3.scale.time. И в своем назначении по шкале вам необходимо отменить свои xEnd и xStart.

Здесь все работает:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" 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>

источник

2015-08-15 17:10:16 Mark

Спасибо за ответы, я понял требование секунды/миллисекунды и думал, что это требуется в течение нескольких секунд. Кроме того, начало и конец не меняются на противоположные, так как я требую новейшего времени с правой стороны, поскольку новые данные подталкиваются с этой целью – Steven

D3.js Шкала времени, начиная с ныне

ответ

Смежные вопросы