找到你要的答案

Q:D3.js Time scale starting at now

Q:d3.js时间尺度从现在

I have a graph which shows live data over the past 90 minutes currently my x axis is labelled 90 to 0 using

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

What I want to do is replace the numbers 0 - 90 with times, ie the 90 would be now-90 and the 0 would be now I have tried the following but it fails to draw the axis, any ideas where I have went wrong

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

我有一个图表,显示在过去90分钟的现场数据目前我的X轴被标记为90至0使用

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

What I want to do is replace the numbers 0 - 90 with times, ie the 90 would be now-90 and the 0 would be now I have tried the following but it fails to draw the axis, any ideas where I have went wrong

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);
answer1: 回答1:

You seem to have swapped the xEnd and xStart. In your first code block, the smaller value is at the end. In your 2nd, the larger values is at the end.

Also, your first line converts the xStart and xEnd values into seconds. You don't convert them back to milliseconds in your domain call. When d3 coerces them into dates, they won't be what you expect (will be far lesser)

你似乎已经交换了Xen和xStart。在第一个代码块中,较小的值在结尾处。在你的第二,较大的值是在结束。

另外,你的第一行转换和Xen值为秒xStart。您不能将它们转换为域调用中的毫秒。当D3强迫他们的日期,他们不一定是你所期望的(将远小)

answer2: 回答2:

As @potatopeelings excellent answer states, JavaScript works with milliseconds. Also, a couple of other things. It's d3.time.scale, not d3.scale.time. And in your scale assignment, you need to reverse your xEnd and xStart.

Here it all is working:

<!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>

“potatopeelings优秀答案状态,JavaScript与毫秒。另外,还有一些其他的事情。这是d3.time.scale,不d3.scale.time。在你的任务范围,你需要调整你的Xen和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>
javascript  d3.js