javascript - D3js : data update is not updating right objects

Question

我正在尝试使用 d3.js 构建水平日历时间线。主要目标是突出显示用户的假期和假期。

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

• 我首先从“开始”日期到“结束”日期进行调整。
• 然后附加文本。
• 突出显示与假期数据匹配的矩形

• 但它始终突出显示第一个“n”个矩形。

  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

我对输入数据做了一些更改，以便您可以比较苹果与苹果，并且还使用了 jquery 的辅助函数。 This fiddle是结果。希望这会有所帮助。

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