Javascript Can'；t在d3散点图的x轴上显示日期

使用以下代码，我创建了两个版本的日期值（一个是字符串，

progressDateString

，另一个是日期类型，

progressDate

）：

我想用下面的代码在x轴上以

12-Jul-19

格式显示日期，但它不会打印日期值

  const xScale = d3.scaleLinear()
      .range([0, width])
      .domain([d3.min(data, d => { return d.progressDateString }), d3.max(data, d => { return d.progressDateString })]);

但是，如果使用

progressDate

，则会得到以下图表，其中所有内容都在x轴上重叠：

任何想法，为什么我不能让它与

progressDateString

value一起工作？实际上，它似乎应该起作用。谢谢你的帮助

为了以防万一，我将分享以下全部代码：

    var parseTime = d3.timeParse("%d-%b-%y");
    var formatTime = d3.timeFormat("%d-%b-%y");

    data = d3.csvParse(data, function (d) {
        return {
            progress: d.Progress,
            progressDate: parseTime(d.ProgressDate), 
            progressDateString: formatTime(parseTime(d.ProgressDate)),
        };
    });
    console.log(data[2].progressDate);


    const height = 300,
        width = 400,
        margins = { top: 20, right: 100, bottom: 50, left: 50 };

    const chart = d3.select('.chart')
        .attr('width', width + margins.left + margins.right)
        .attr('height', height + margins.top + margins.bottom)
        .append('g')
        .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');


    const xScale = d3.scaleLinear()
        .range([0, width])
        .domain([d3.min(data, d => { return d.progressDate }), d3.max(data, d => { return d.progressDate })]);

    const yScale = d3.scaleLinear()
        .range([0, height])
        .domain([d3.max(data, d => { return d.progress }), 0]);

    const dots = chart.selectAll('dot')
        .data(data)
        .enter().append('circle')
        .attr('r', 5)
        .attr('cx', d => { return xScale(d.progressDate); })
        .attr('cy', d => { return yScale(d.progress) })
        .style('fill', 'indianred');


    chart.selectAll('text')
        .data(data)
        .enter().append('text')
        .text(d => { return d.Name; })
        .attr('x', d => { return xScale(d.progressDate); })
        .attr('y', d => { return yScale(d.progress); })
        .attr('transform', 'translate(10,5)');

    chart.append('g')
        .attr('transform', 'translate(0,' + height + ')')
        .call(d3.axisBottom(xScale));

    chart.append('g')
        .call(d3.axisLeft(yScale));

    chart.append('text')
        .style('font-size', '14px')
        .style('text-anchor', 'middle')
        .attr('x', width / 2)
        .attr('y', height + 50)
        .text('Seconds Behind Fastest Time')

    chart.append('text')
        .style('font-size', '14px')
        .style('text-anchor', 'middle')
        .attr('x', height / -2)
        .attr('y', -30)
        .attr('transform', 'rotate(-90)')
        .text('Ranking')

---

使用

scaleTime

而不是

scaleLinear

可以达到目的。我希望它能帮助别人

    var parseTime = d3.timeParse("%d-%b-%y");
    var formatTime = d3.timeFormat("%d-%b-%y");

    data = d3.csvParse(data, function (d) {
        return {
            progress: d.Progress,
            progressDate: parseTime(d.ProgressDate), 
            progressDateString: formatTime(parseTime(d.ProgressDate)),
        };
    });
    console.log(data[2].progressDate);


    const height = 300,
        width = 400,
        margins = { top: 20, right: 100, bottom: 50, left: 50 };

    const chart = d3.select('.chart')
        .attr('width', width + margins.left + margins.right)
        .attr('height', height + margins.top + margins.bottom)
        .append('g')
        .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');


    const xScale = d3.scaleLinear()
        .range([0, width])
        .domain([d3.min(data, d => { return d.progressDate }), d3.max(data, d => { return d.progressDate })]);

    const yScale = d3.scaleLinear()
        .range([0, height])
        .domain([d3.max(data, d => { return d.progress }), 0]);

    const dots = chart.selectAll('dot')
        .data(data)
        .enter().append('circle')
        .attr('r', 5)
        .attr('cx', d => { return xScale(d.progressDate); })
        .attr('cy', d => { return yScale(d.progress) })
        .style('fill', 'indianred');


    chart.selectAll('text')
        .data(data)
        .enter().append('text')
        .text(d => { return d.Name; })
        .attr('x', d => { return xScale(d.progressDate); })
        .attr('y', d => { return yScale(d.progress); })
        .attr('transform', 'translate(10,5)');

    chart.append('g')
        .attr('transform', 'translate(0,' + height + ')')
        .call(d3.axisBottom(xScale));

    chart.append('g')
        .call(d3.axisLeft(yScale));

    chart.append('text')
        .style('font-size', '14px')
        .style('text-anchor', 'middle')
        .attr('x', width / 2)
        .attr('y', height + 50)
        .text('Seconds Behind Fastest Time')

    chart.append('text')
        .style('font-size', '14px')
        .style('text-anchor', 'middle')
        .attr('x', height / -2)
        .attr('y', -30)
        .attr('transform', 'rotate(-90)')
        .text('Ranking')