Question

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

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

我首先从'开始'日期到'结束'日期。
然后追加文字。
突出显示与vacations

但它会突出显示第一个'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');

这是错误的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';
    });

Answer 2

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

请检查是否有帮助。

D3js：数据更新没有更新正确的对象

2 个答案: