CODEWITHSUNDEEP
d3.js
draptik
draptik

Reputation: 480

display dates on y-axis: first entry missing?

I'm trying to display a horizontal bar plot with iso dates (Y-M-D) on the y axis.

Here is what I've come up with so far:

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

Stripped down version:

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

Problem: First data entry is missing (data[0].date: 2014-11-01):

screenshot browser

screenshot browser debugging

Any ideas? Looks like off-by-one error, but I can't spot my mistake.

Upvotes: 2

Views: 2062

Answers (1)

huan feng
huan feng

Reputation: 8633

You have some typo in the fiddle, and you can try nice method to specify the ticks:

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

updated fiddle

Upvotes: 1

Related Questions