缩放d3时间轴的更好方法

Question

I'm trying to draw a line using D3.js. They are samples taken at intervals over a period of time. I want to draw them with a time axis for x. Each point of data is just an index in an array and I can't figure out how to set up my axis in such a way that I don't have to manually re-scale the axis before calling d3.time.scale.

Does anyone know how to clean up the scale?

Snippets out of my code. My actual code downloads the data and draws a lot of lines over different time periods with different offsets translated in the graph.

// 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...

Answer 1

The "domain" should refer to the span in the data, and the "range" should refer to the span on the screen.

At the moment it would be interpreting .range([0, 100]) on scale_x as a number of pixels. If you change this to .range([0, width]) it should work without needing to re-scale.

d3.time.scale() only needs to know the start and end points to produce a good axis. However if you do want a tick for every data point there are options do do this in the docs .