在y轴上显示日期：第一个条目丢失？

Question

我试图在y轴上显示带有iso日期（Y-M-D）的水平条形图。

这是我到目前为止所提出的：

http://jsfiddle.net/draptik/0zLyysza/

剥离版本：

var data = [
  {date: new Date('2014-11-01'), kg: 1},
  {date: new Date('2014-11-02'), kg: 2},
  {date: new Date('2014-11-03'), kg: 3}
];

var width = 600,
    barHeight = 20,
    margin = { bottom: 50, left: 100 };

var x = d3.scale.linear()
      .domain([0, d3.max(data, function (d) { return d.kg; })])
      .range([0, width]);

var y = d3.time.scale()
      .domain([data[data.length - 1].date, data[0].date])
      .range([barHeight * data.length, 0]);

var svgContainer = d3.select('#chartContainer').append('svg')
      .attr('width', width + margin.left)
      .attr('height', barHeight * data.length + margin.bottom)
      .style('border', '1px dashed red');

var barGroup = svgContainer.selectAll('g')
      .data(data)
      .enter()
      .append('g')
      .attr('transform', function(d, i) { return 'translate(' + margin.left + ',' + (i * barHeight) + ')'; });

barGroup.append('rect')
  .attr('width', function(d) { return x(d.kg); })
  .attr('height', barHeight - 1)
  .attr('fill', 'gray');

// x axis ====================================================
var xAxis = d3.svg.axis().scale(x);

svgContainer.append('g')
  .attr('transform' , 'translate(' + margin.left + ',' + (barHeight * data.length) + ')')
  .call(xAxis);

// y axis ====================================================
var yAxis = d3.svg.axis()
      .scale(y)
      .orient('left')
      .ticks(d3.time.days, 1) // 1 tick per day
      .tickSize(0)
      .tickFormat(d3.time.format('%Y-%m-%d'));

svgContainer.append('g')
  .attr('transform' , 'translate(' + margin.left + ',0)')
  .call(yAxis);

问题：缺少第一个数据输入（数据[0]。日期：2014-11-01）：

有什么想法吗？看起来像是一个一个错误，但我无法发现我的错误。

Answer 1

你在小提琴中有一些拼写错误，你可以尝试很好的方法来指定刻度：

var y = d3.time.scale()
    .domain([data[data.length - 1].date, data[0].date])
    .range([barHeight * data.length, 0]).nice(data.length);

updated fiddle