绘制时间轴-d3.js

Question

Can someone help me draw an axis with 1 tick for each hour (6am-6pm).
I'll later draw minute ticks - 60 ticks/hr.
I just started learning d3 today and can't figure this out.

var x = d3.time.scale();    

var svg = d3.select('body').append('svg')
         .attr('width', 1000).attr('height', 850);

var xAxis = d3.svg.axis().scale(x).orient('bottom')
           .tickFormat(d3.time.format());

svg.append('g').attr('class', 'axis')
   .call(xAxis)
   .attr('transform','translate(20, 10)');

Answer 1

var x = d3.time.scale();

var svg = d3.select('body').append('svg') .attr('width', 1000).attr('height', 850);

var xAxis = d3.svg.axis().scale(x).orient('bottom') .tickFormat(d3.time.format()); .ticks(d3.time.hours, 1)

svg.append('g').attr('class', 'axis') .call(xAxis)
.attr('transform','translate(20, 10)');

here is the link https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-ticks

.ticks(d3.time.hours),1)

is what you need..

for minutes

.ticks(d3.time.minutes),1)