缩放 d3 时间轴的更好方法答案

【问题标题】：Better way to scale d3 time axis缩放 d3 时间轴的更好方法
【发布时间】：2012-11-12 23:14:28
【问题描述】：

我正在尝试使用 D3.js 画一条线。它们是在一段时间内间隔采集的样本。我想用 x 的时间轴来绘制它们。每个数据点只是数组中的一个索引，我不知道如何设置我的轴，这样我就不必在调用 d3.time.scale 之前手动重新缩放轴。

有人知道如何清理秤吗？

我的代码中的片段。我的实际代码会下载数据并在不同的时间段内绘制很多线，并在图中转换不同的偏移量。

// input data
var start_time = 1352684763;
var end_time = 1352771163;
// data is exactly 100 samples taken between start_time and end_time
var data = [140,141,140,140,139,140,140,140,140,141,139,140,54,0,0,0,0,0,0,0,0,0...]
var y_max = d3.max(data);

// graph
var scale_x = d3.time.scale().domain([start_time, end_time]).range([0, 100]);
var scale_y = d3.scale.linear().domain([0, y_max]).range([height, 0]);
var step = (end_time - start_time)/100;
function re_scale(x) { return start_time + x*step; }

// for x, rescale i (0..99) into a timestamp between start_time and end_time before returning it and letting scale_x scale it to a local position. Awkward.
var line = d3.svg.line()
    .x(function(d, i) { return scale_x(re_scale(i)); })
    .y(scale_y)
    .interpolate('basis')

var g = graph.selectAll("g")
    .append('svg:path')
    .attr('d', function(d) { return line(data); })

// also draw axis here...

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

“域”应指数据中的跨度，“范围”应指屏幕上的跨度。

目前它会将 scale_x 上的.range([0, 100]) 解释为像素数。如果您将其更改为.range([0, width])，它应该可以工作而无需重新缩放。

d3.time.scale() 只需要知道起点和终点就可以产生一个好的轴。但是，如果您确实想要为每个数据点打勾，则可以在 docs 中执行此操作。

【讨论】：