Javascript D3js:数据更新未更新正确的对象

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

• 我第一次从“开始”日期到“结束”日期
• 然后添加文本
• 突出显示与度假数据匹配的rect
• 但它始终突出显示第一个“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');
  

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

这是错误的吗

d3.selectAll（'rect.day'）.data（vacations.attr（'class'，'holiday'））

编辑：格式和其他详细信息。
以下是详细信息

问题在于该代码靠近
天
变量

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');
变量天数=图表。选择全部（“.day”）
.data（函数（d）{返回d3.time.days（新日期（Date.start）），新日期（Date.end））；}
.输入（）
.append（'svg:g'）
.attr（“班级”、“日”）；
之前是这样的。

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

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天数=图表
.selectAll（“.day”）
.data（函数（d）{返回d3.time.days（新日期（Date.start）），新日期（Date.end））；}
.输入（）
.append（'svg:g'）
.attr（“班级”、“日”）；
请检查它是否有用。
我对输入数据做了一些更改，以便您可以对苹果进行比较，还可以使用jquery中的帮助函数。这就是结果。希望这有帮助

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

我没有看到任何变化，除了第一行的换行删除。我没有解决突出显示所列日期的主要问题。
假期
变量您想突出显示假期吗？是的。我想强调假期。澄清一下：原始代码用假期数据替换日期数据；没有按键功能，新数据从一开始就被分配@FernOfTheAndes的代码捕获所有的矩形，如果它们的日期与假期匹配，则为它们设置样式。您可以交替使用，而不是在属性方法调用中执行检查，但最终效果是相同的。如果要基于相同的筛选条件设置多个属性或样式，则首选筛选。此外，如果页面上还没有JQuery，则可以使用
vacations.indexOf[d.getTime]>-1
。它是，但SVG图形也不是。为了比较，小提琴使用过滤格式：，并使用标准Javascript方法而不是JQuery:@UnknownUser首先，我输入了一些错误，它应该是圆括号，如
（）
，而不是硬括号
[]
，在
getTime
之后还应该有
（）
。
.indexOf
方法（以及主帖子中的JQuery方法）在数组中查找与传入值（
d.getTime
）相等的条目。如果找到匹配项，它将返回第一个匹配项的索引，该索引将为数字0或更大。如果没有找到匹配项，则返回-1。因此
vacations.indexOf（d.getTime（））>-1
如果数组
vacations
包含
d.getTime（）
的匹配项，则返回
true
。我应该指出，它只起作用，因为已修改vacations数组，使其包含与
getTime（）
的结果匹配的时间戳值@FernOfTheAndes的代码在原始数据数组中实现了这一点，但您也可以使用映射函数：
var vacationsAsTimestamp=vacations.map（函数（dateString）{return new Date（dateString.getTime（）；}）