Question

我有一张图表显示了过去90分钟的实时数据，目前我的x轴标记为90到0，使用

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

Answer 1

作为@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时间刻度从现在开始

1 个答案: