Javascript比较日期-d3.js图表中的错误

我试图稳定这张图表-我试图比较日期对象-但随后它遇到了夏季时间差异的问题-我不确定为什么数据的变化会破坏图表-我遇到了一个未定义的问题

//工作小提琴

//破提琴

-- 因此，当向图表中添加额外的数据位时，会产生一个未定义的错误

, {
  "text-start": "Text9",
  "date-start": "2012-05-01",
  "text-end": "Text10",
  "date-end": "2012-05-03"
}

起初我认为可能需要强制yAxis显示1天的增量--.ticks（d3.time.days（min，max.length））就好像坐标在两天之间不存在一样

这是工作图表的代码

var data = [{
  "text-start": "Text1",
  "date-start": "2012-04-21",
  "text-end": "Text2",
  "date-end": "2012-04-26"
}, {
  "text-start": "Text3",
  "date-start": "2012-04-22",
  "text-end": "Text4",
  "date-end": "2012-04-25"
}, {
  "text-start": "Text5",
  "date-start": "2012-04-26",
  "text-end": "Text6",
  "date-end": "2012-04-28"
}, {
  "text-start": "Text7",
  "date-start": "2012-04-21",
  "text-end": "Text8",
  "date-end": "2012-04-23"
}];

var margin = {
    top: 40,
    right: 40,
    bottom: 40,
    left: 60
  },
  width = 600,
  height = 500;

function colores_google(n) {
  var colores_g = ["#e9168a", "#f8dd2f", "#448875", "#c3bd75", "#2b2d39", "#311854", "#553814", "#f7b363", "#89191d", "#c12f34", "#2b2a2c", "#c5b8a6", "#57585b"];

  return colores_g[n % colores_g.length];
}


var y = d3.time.scale().range([height - margin.top - margin.bottom, 0]);


var arrayofDates = [];
$.each(data, function(index, value) {
    arrayofDates.push(value["date-start"]);
    arrayofDates.push(value["date-end"]);
});

var parseDate = d3.time.format("%m/%d/%Y").parse;

var min = new Date(d3.min(arrayofDates.map(d=>d)));
var max = new Date(d3.max(arrayofDates.map(d=>d)));

y.domain([min,max]);

var chart = d3.select('#timelines').append('svg')
  .attr('class', 'chart')
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

//http://stackoverflow.com/questions/22722952/how-can-i-get-the-d3-js-axis-ticks-and-positions-as-an-array

var axisArray = [];

var yAxis = d3.svg.axis()
  .scale(y)
  .orient('left')
  .tickPadding(1);

chart.append('g')
  .attr('class', 'y axis')
  .call(yAxis)
  .selectAll(".tick").each(function(data) {
    var tick = d3.select(this);
    // pull the transform data out of the tick
    var transform = d3.transform(tick.attr("transform")).translate;
    // passed in "data" is the value of the tick, transform[0] holds the X value
    //console.log("each tick", data, transform);

    var month = data.getMonth() + 1;
    if (month < 10) {
      month = "0" + month;
    }
    var datestring = data.getFullYear() + "-" + month + "-" + data.getDate();

    var obj = {
      "data": datestring,
      "transform": transform
    }

    axisArray.push(obj);
  });


var links = chart.append('g')
  .attr('class', 'links')
  .attr("transform", "translate(0,0)");


function getRadius(d) {
  var count = 2;
  var ratio = count * 2.8;

  if (count == 1) {
    ratio = 10;
  }
  return ratio;
}


function getPos(date) {
  var trans;
  $.each(axisArray, function(index, value) {
    var a = value.data;
    var b = date;

    //console.log("a", a)
    //console.log("b", b)

    if (a == b) {
      //console.log("value", value.transform)
        //if (a.getTime() === b.getTime()) {
      trans = value.transform;
    }
  });

  return trans;
}



var distanceBetween = 70;

var paths = links.selectAll("path")
  .data(data);

paths.enter()
  .append("path")
  .attr("class", "link")
  .attr("d", function(d, i) {
    var sx = 0;
    var tx = 0;

    //console.log("d", d);

    var posEnd = getPos(d["date-start"]);
    var posStart = getPos(d["date-end"]);

    var sy = posStart[1];
    var ty = posEnd[1];


    var dx = 0,
      dy = getRadius(d) + 15 + (distanceBetween * i),
      dr = 10 //Math.sqrt(dx * dx + dy * dy);

    return "M" + sx + "," + sy + "A" + dr + "," + dr + " 0 0,1 " + tx + "," + ty;
  })
  .attr('stroke-width', 1.2)
  .attr("stroke", function(d, i) {
    //console.log("d", i);
    return colores_google(i);
  })

var数据=[{
“文本开始”：“文本1”，
“开始日期”：“2012-04-21”，
“文本结束”：“文本2”，
“日期结束”：“2012-04-26”
}, {
“文本开始”：“Text3”，
“开始日期”：“2012-04-22”，
“文本结束”：“文本4”，
“日期结束”：“2012-04-25”
}, {
“文本开始”：“文本5”，
“开始日期”：“2012-04-26”，
“文本结束”：“Text6”，
“日期结束”：“2012-04-28”
}, {
“文本开始”：“文本7”，
“开始日期”：“2012-04-21”，
“文本结束”：“Text8”，
“日期结束”：“2012-04-23”
}];
var保证金={
前40名，
右:40,，
底数：40，
左：60
},
宽度=600，
高度=500；
函数colors_google（n）{
var colores_g=[“#e9168a”、“#f8dd2f”、“#448875”、“#c3bd75”、“#2b2d39”、“#311854”、“#553814”、“#f7b363”、“#89191d”、“#c12f34”、“#2B2C2C”、“#B8A6”、“ţ；
返回颜色[n%颜色长度]；
}
变量y=d3.time.scale（）.range（[height-margin.top-margin.bottom，0]）；
var arrayofDates=[]；
$.each（数据、函数（索引、值）{
arrayofDates.push（值[“日期开始”]）；
arrayofDates.push（值[“日期结束]）；
});
var parseDate=d3.time.format（“%m/%d/%Y”）.parse；
var min=新日期（d3.min（arrayofDates.map（d=>d））；
var max=新日期（d3.max（arrayofDates.map（d=>d））；
y、 域（[min，max]）；
var chart=d3。选择（“#时间线”）。追加（'svg'）
.attr（'类'，'图表'）
.attr（'width'，width）
.attr（'height'，height）
.append（'g'）
.attr（'transform'，'translate（'+margin.left+'，'+margin.top+'））；
//http://stackoverflow.com/questions/22722952/how-can-i-get-the-d3-js-axis-ticks-and-positions-as-an-array
var axisArray=[]；
var yAxis=d3.svg.axis（）
.比例（y）
.orient（'左'）
.1（1）；
chart.append（'g'）
.attr（'class'，'y轴'）
.呼叫（yAxis）
.选择全部（“.勾选”）。每个功能（数据）{
var tick=d3。选择（此）；
//将变换数据从勾号中拉出
var transform=d3.transform（tick.attr（“transform”））.translate；
//传入的“数据”是刻度的值，转换[0]保存X值
//console.log（“每个勾号”、数据、转换）；
var month=data.getMonth（）+1；
如果（月<10）{
月份=“0”+月份；
}
var datestring=data.getFullYear（）+“-”+month+“-”+data.getDate（）；
var obj={
“数据”：日期字符串，
“变换”：变换
}
axisArray.push（obj）；
});
var links=chart.append（'g'）
.attr（'class'，'links'））
.attr（“转换”、“翻译（0,0）”）；
函数getRadius（d）{
var计数=2；
风险值比率=计数*2.8；
如果（计数=1）{
比率=10；
}
回报率；
}
函数getPos（日期）{
var-trans；
$.each（axisArray，函数（索引，值）{
var a=价值数据；
var b=日期；
//console.log（“a”，a）
//控制台日志（“b”，b）
如果（a==b）{
//console.log（“value”，value.transform）
//如果（a.getTime（）==b.getTime（））{
trans=value.transform；
}
});
返回反式；
}
var距离=70；
变量路径=链接。选择全部（“路径”）
.数据（数据）；
路径。输入（）
.append（“路径”）
.attr（“类”、“链接”）
.attr（“d”，函数（d，i）{
var-sx=0；
var-tx=0；
//控制台日志（“d”，d）；
var posEnd=getPos（d[“日期开始]）；
var posStart=getPos（d[“日期结束”]）；
var sy=posStart[1]；
var ty=posEnd[1]；
var dx=0，
dy=getRadius（d）+15+（间距*i），
dr=10//Math.sqrt（dx*dx+dy*dy）；
返回“M”+sx+”、“+sy+”A“+dr+”、“+dr+”0,1“+tx+”、“+ty”；
})
.attr（'stroke-width'，1.2）
.attr（“笔划”，功能（d，i）{
//控制台日志（“d”，i）；
返回颜色（i）；
})

——稳定的固定版本

我设法解决了它：

错误是因为：

console.log("pos", posEnd, posStart)

返回：

pos undefined [0, 256.6666564941406]

posEnd是未定义的。因此，您无法获取未定义的

的
posEnd[1]；
。这正是控制台错误：无法获取未定义的属性1

这是因为，在getPos中，axisArray的最小值是：
{data:“2012-04-22”}

这不是日期转换的问题，而是因为：
.selectAll（“.tick”）。每个（函数（数据）{
只接收4月22日作为第一个日期

如果您同意，可以通过在两端添加一天的填充来修复。在最小和最大定义后添加以下两行：

min.setDate(min.getDate() - 1);
max.setDate(max.getDate() + 1);

如果您不喜欢最后额外的一天，您实际上只需要在min日期之前解决此问题。您可以简单地执行以下操作：

min.setDate(min.getDate() - 1);

我的猜测是域被设置为（min，max）；这意味着它包括上边界，但不包括下边界。然而，除了更改有效之外，对这一点不是100%确定的

然后，您在几个月前修复了0，但在几天内没有这样做：

var day = data.getDate();
if (day < 10) day = "0" + day;

var day=data.getDate（）；
如果（天<10）天=“0”+天；

有了这两个变化，它对我起作用了

虽然我不确定为什么这对您的“工作版本”有效，而对“损坏版本”无效，但这些更改也使工作版本正常工作：

还可以将.ticks（d3.time.days（min，max.length））添加到yAxis中，以确保时间线的增量为1天

我希望这会有所帮助。
posEnd[1]-变得未定义-但我不确定为什么-或者是什么导致了这个错误问题似乎是
chart.call（yAxis）。selectAll（.tick”）
的结果比
arrayofDates的结果少一个，那么在