D3js: обновление данных не обновляет правые объекты

Question

Я пытаюсь построить горизонтальную шкалу календаря, используя d3.js. Основная цель - выделить праздники и отпуск для пользователя.

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

• Я первый прямоугольник с 'начальной' даты до 'конца' даты.
• Затем добавьте текст.
• выделите прямоугольник, который соответствует данным из vacations

• но это выдвигает на первый план всегда первым «п» Прямоугольник.

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

Это неправильно d3.selectAll('rect.day').data(vacations).attr('class', 'holiday');?

Редактировать: формат и дополнительные сведения.

Answer 1

Вот Fiddle.

Проблема была с этим кодом рядом с переменной days.

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

Раньше было так.

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

Пожалуйста, проверьте это.

Answer 2

Я немного изменил входные данные, чтобы вы могли сравнивать яблоки с яблоками, а также использовать вспомогательную функцию из jquery. This fiddle - результат. Надеюсь это поможет.

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