Javascript 在开始日期和结束日期之间追加一行

基本上，我使用D3创建一个基于甘特图的图表。我有一个.json文件，其中包含我的数据，能够创建显示适当信息的x-y刻度。我遇到的这个问题是，我希望数组中15个项中的每一项的行都在开始日期和结束日期之间延伸，所有这些项都包含名称、开始日期和结束日期。当我启动图表时，会显示信息，但它只显示一条从y轴开始的实线，并一直延伸到一个开始日期

在尝试纠正这种情况时，我意识到，通过将todays date作为新项添加到startDate下的数组中，任何日期为今天的项都能完全按照我的要求执行，而其他项则不能。我不确定是什么原因造成的，但推测可能与日期的解析方式有关？完全不知所措，因为我还是d3新手

// employment.json 
[
    {
      "name": "Placeholder 1",
      "position": "Occupation 1",
      "startDate": "2013-09-05",
      "endDate": "2019-08-01"
    },
    {
      "name": "Placeholder 2",
      "position": "Occupation 1",
      "startDate": "2013-09-05",
      "endDate": "2018-10-31"
    },
    {
      "name": "Placeholder 3",
      "position": "Occupation 1",
      "startDate": "2013-11-05",
      "endDate": "2014-03-03"
    },
    {
      "name": "Placeholder 4",
      "position": "Occupation 1",
      "startDate": "2014-05-09",
      "endDate": "2015-04-06"
    },
    {
      "name": "Placeholder 5",
      "position": "Occupation 1",
      "startDate": "2014-12-01",
      "endDate": "2019-08-01"
    },
    {
      "name": "Placeholder 6",
      "position": "Occupation 1",
      "startDate": "2015-04-20",
      "endDate": "2016-10-18"
    },
    {
      "name": "Placeholder 7",
      "position": "Occupation 1",
      "startDate": "2016-05-05",
      "endDate": "2019-07-31"
    },
    {
      "name": "Placeholder 8",
      "position": "Occupation 1",
      "startDate": "2016-11-07",
      "endDate": "2017-05-12"
    },
    {
      "name": "Placeholder 9",
      "position": "Occupation 1",
      "startDate": "2017-09-18",
      "endDate": "2019-08-01"
    },
    {
      "name": "Placeholder 10",
      "position": "Occupation 1",
      "startDate": "2018-01-11",
      "endDate": "2018-09-20"
    },
    {
      "name": "Placeholder 11",
      "position": "Occupation 1",
      "startDate": "2018-04-17",
      "endDate": "2018-07-24"
    },
    {
      "name": "Placeholder 12",
      "position": "Occupation 1",
      "startDate": "2018-07-04",
      "endDate": "2018-08-30"
    },
    {
      "name": "Placeholder 13",
      "position": "Occupation 1",
      "startDate": "2018-07-09",
      "endDate": "2019-08-01"
    },
    {
      "name": "Placeholder 14",
      "position": "Occupation 1",
      "startDate": "2019-01-16",
      "endDate": "2019-08-01"
    },
    {
      "name": "Placeholder 15",
      "position": "Occupation 1",
      "startDate": "2019-04-01",
      "endDate": "2019-08-01"
    },
    {
      "name": "Total Time",
      "position": "Occupation 1",
      "startDate": "2013-09-05",
      "endDate": "2019-08-01"
     }
  ]

// app.js

var margin = {top: 10, right: 30, bottom: 80, left: 100},
    width = 960 - margin.left - margin.right,
    height = 560 - margin.top - margin.bottom;

var svg = d3.select("#employment_history")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

d3.json('json/employment.json', function(error, data) {
    if (error) {
      return console.warn(error);
    } else {
      console.log(data);
    }

    var x = d3.scaleBand()
        .range([0, width ])
        .domain(data.map(function(d) { return d.startDate }, 
data.map(function(d) { return d.endDate })))
        .padding(0.2);
    svg.append('g')
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .selectAll("text")
        .attr("transform", "translate(-10,0)rotate(-45)")
        .style("text-anchor", "end");

    var y = d3.scaleBand()
        .range([ 0, height ])
        .domain(data.map(function(d) { return d.name; }))
        .padding(2);
      svg.append("g")
        .call(d3.axisLeft(y))

  // Lines
  svg.selectAll("myLine")
    .data(data)
    .enter()
    .append("line")
      .attr("x1", function(d) { return x(d.startDate); })
      .attr("x2", function(d) { return x(d.endDate); })
      .attr("y1", function(d) { return y(d.name); })
      .attr("y2", function(d) { return y(d.name); })
      .attr("stroke", "orange")
      .attr("stroke-width", "2px")
  })  

控制台中没有显示错误，它提供了一个从Y轴开始并延伸到开始日期的图表，而不是从开始日期开始并连接到结束日期

---

我试图完成的一个例子，以及我遵循的创建这个的方法是：

你的尺度错误

这里的主要问题是x轴，它应该使用时间刻度，而不是波段刻度。那么，让我们看看必要的变化：

首先，分析数据数组中的日期：

const parse = d3.timeParse("%Y-%m-%d");

data.forEach(function(d) {
  d.startDate = parse(d.startDate);
  d.endDate = parse(d.endDate);
});

然后，设置时间刻度，根据日期计算域：

var x = d3.scaleTime()
  .range([0, width])
  .domain([d3.min(data, function(d) {
    return d.startDate
  }), d3.max(data, function(d) {
    return d.endDate
  })]);

最后，您的y刻度应该是点刻度，而不是波段刻度：

var y = d3.scalePoint()
  .range([0, height])
  .domain(data.map(function(d) {
    return d.name;
  }))
  .padding(0.5);

下面是工作代码（在较小的SVG中）：

const数据=[{
“名称”：“占位符1”，
“职位”：“职业1”，
“起始日期”：“2013-09-05”，
“结束日期”：“2019-08-01”
},
{
“名称”：“占位符2”，
“职位”：“职业1”，
“起始日期”：“2013-09-05”，
“截止日期”：“2018-10-31”
},
{
“名称”：“占位符3”，
“职位”：“职业1”，
“起始日期”：“2013-11-05”，
“结束日期”：“2014-03-03”
},
{
“名称”：“占位符4”，
“职位”：“职业1”，
“起始日期”：“2014-05-09”，
“结束日期”：“2015-04-06”
},
{
“名称”：“占位符5”，
“职位”：“职业1”，
“起始日期”：“2014-12-01”，
“结束日期”：“2019-08-01”
},
{
“名称”：“占位符6”，
“职位”：“职业1”，
“起始日期”：“2015-04-20”，
“截止日期”：“2016-10-18”
},
{
“名称”：“占位符7”，
“职位”：“职业1”，
“起始日期”：“2016-05-05”，
“结束日期”：“2019-07-31”
},
{
“名称”：“占位符8”，
“职位”：“职业1”，
“起始日期”：“2016-11-07”，
“截止日期”：“2017-05-12”
},
{
“名称”：“占位符9”，
“职位”：“职业1”，
“起始日期”：“2017-09-18”，
“结束日期”：“2019-08-01”
},
{
“名称”：“占位符10”，
“职位”：“职业1”，
“起始日期”：“2018-01-11”，
“截止日期”：“2018-09-20”
},
{
“名称”：“占位符11”，
“职位”：“职业1”，
“起始日期”：“2018-04-17”，
“截止日期”：“2018-07-24”
},
{
“名称”：“占位符12”，
“职位”：“职业1”，
“起始日期”：“2018-07-04”，
“截止日期”：“2018-08-30”
},
{
“名称”：“占位符13”，
“职位”：“职业1”，
“起始日期”：“2018-07-09”，
“结束日期”：“2019-08-01”
},
{
“名称”：“占位符14”，
“职位”：“职业1”，
“起始日期”：“2019-01-16”，
“结束日期”：“2019-08-01”
},
{
“名称”：“占位符15”，
“职位”：“职业1”，
“起始日期”：“2019-04-01”，
“结束日期”：“2019-08-01”
},
{
“名称”：“总时间”，
“职位”：“职业1”，
“起始日期”：“2013-09-05”，
“结束日期”：“2019-08-01”
}
];
var保证金={
前10名，
右:30,，
底部：80，
左：100
},
宽度=600-边距。左侧-边距。右侧，
高度=400-margin.top-margin.bottom；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
const parse=d3.timeParse（“%Y-%m-%d”）；
data.forEach（函数（d）{
d、 startDate=parse（d.startDate）；
d、 endDate=parse（d.endDate）；
});
var x=d3.scaleTime（）
.范围（[0，宽度]）
.domain（[d3.min（数据、函数（d））{
返回起始日期
})，d3.max（数据，函数（d）{
返回d.endDate
})]);
append（'g'）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））
.selectAll（“文本”）
.attr（“变换”、“平移（-10,0）旋转（-45）”）
.样式（“文本锚定”、“结束”）；
变量y=d3.scalePoint（）
.范围（[0，高度]）
.domain（data.map）（函数（d）{
返回d.name；
}))
.填充（0.5）；
svg.append（“g”）
.呼叫（d3.左（y））
//线条
svg.selectAll（“myLine”）
.数据（数据）
.输入（）
.附加（“行”）
.attr（“x1”，函数（d）{
返回x（d.起始日期）；
})
.attr（“x2”，函数（d）{
返回x（d.结束日期）；
})
.attr（“y1”，函数（d）{
返回y（d.name）；
})
.attr（“y2”，功能（d）{
返回y（d.name）；
})
.attr（“笔划”、“橙色”）
.attr（“笔划宽度”、“2px”）

---

您的刻度错误

这里的主要问题是x轴，它应该使用时间刻度，而不是波段刻度。那么，让我们看看必要的变化：

首先，分析数据数组中的日期：

const parse = d3.timeParse("%Y-%m-%d");

data.forEach(function(d) {
  d.startDate = parse(d.startDate);
  d.endDate = parse(d.endDate);
});

然后，设置时间刻度，根据日期计算域：

var x = d3.scaleTime()
  .range([0, width])
  .domain([d3.min(data, function(d) {
    return d.startDate
  }), d3.max(data, function(d) {
    return d.endDate
  })]);

最后，您的y刻度应该是点刻度，而不是波段刻度：

var y = d3.scalePoint()
  .range([0, height])
  .domain(data.map(function(d) {
    return d.name;
  }))
  .padding(0.5);

下面是工作代码（在较小的SVG中）：

const数据=[{
“名称”：“占位符1”，
“职位”：“职业1”，
“起始日期”：“2013-09-05”，
“结束日期”：“2019-08-01”
},
{
“名称”：“占位符2”，
“职位”：“职业1”，
“起始日期”：“2013-09-05”，
“截止日期”：“2018-10