javascript - 绘制时间轴 - d3.js

Question

有人可以帮我画一个每小时（早上 6 点到下午 6 点）有 1 个刻度的轴。
稍后我将绘制分钟刻度 - 60 刻度/小时。
我今天刚开始学习d3，无法弄清楚。

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

这是链接https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-ticks

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

是你需要的..

几分钟

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