D3js : data update is not updating right objects

Question

I am trying to build a horizontal calendar timeline using d3.js. Main goal is to highlight holidays and vacations of user.

http://jsbin.com/ceperavu/2/edit?css,js,output

• I first rect from 'start' date to 'end' date.
• Then append text.
• highlight the rect which match the data from vacations

• but it highlights always the first 'n' rect.

  var width = 650;
  var height = 450;
  var date = {start: '02/24/2014', end: '03/17/2014'};
  var day = d3.time.format("%d");
  var vacations = ['02/25/2014', '02/28/2014', '03/05/2014', '03/14/2014'];
  var cell = {width: 20, height: 20};
  var format = d3.time.format("%m/%d/%Y");
  
  var chart = d3.select("body")
                .append('svg:svg')
                .attr('width', width)
                .attr('height', height)
                .attr('class', 'chart');
  
  
  
  var days = chart
      .selectAll(".day")
      .data(function(d) { return d3.time.days(new Date(date.start), new Date(date.end)); })
      .enter()
      .append('svg:g');
  
  //add rect
      days.append('svg:rect')
        .attr('width', cell.width)
        .attr('height', cell.height)
        .attr('x', function(d, i){ 
          var day = d3.time.format("%d"); 
          // console.log(day(d)); 
          return i * cell.width; })
        .attr('class', 'day')
        .append('title')
          .text(function(d){return format(d);})
        .datum(format);
  
  //add text
      days.append('svg:text')
        .attr('width', cell.width)
        .attr('height', cell.height)
        .attr('x', function(d, i){
          return i * cell.width + cell.width/4; 
        })
        .attr('y', 14)
        // .style('text-anchor', 'middle')
        // .style('dominant-baseline', 'central')
        .text( function(d) { var day = d3.time.format("%d");return day(d); });
  
  //highlight holidays
  d3.selectAll('rect.day').data(vacations).attr('class', 'holiday');
  

Is this wrong d3.selectAll('rect.day').data(vacations).attr('class', 'holiday'); ?

Edit: format and additional details.

Answer 1

I have changed the input data a bit so that you can compare apples to apples and also used a helper function from jquery. This fiddle is the result. Hope this helps.

days.selectAll('rect.day')
    .attr('class', function (d) {
        return  ($.inArray(d.getTime(), vacations))  > -1 ? 'holiday' : 'day';
    });

Answer 2

Here's the Fiddle.

Problem was with this code near the days variable.

var days = chart.selectAll(".day")
    .data(function(d) { return d3.time.days(new Date(date.start), new Date(date.end)); })
        .enter()
        .append('svg:g')
    .attr('class', 'day');

Earlier it was like this.

var days = chart
.selectAll(".day")
    .data(function(d) { return d3.time.days(new Date(date.start), new Date(date.end)); })
        .enter()
        .append('svg:g')
    .attr('class', 'day');

Please check if it helps.