Javascript 在x轴上显示开始日期和结束日期之间的所有日期

我有一个多折线图，显示了两个不同类别的数据。我已经生成了图表，但x轴只显示开始日期和结束日期，而不是两者之间的所有日期。如何显示所有这些日期

我用一个虚拟数据尝试了这段代码，它工作得非常好。我看到的数据之间的唯一区别是日期格式。在虚拟数据中，它只有年份，但在实际数据中有月份和日期

    /* Scale */
    var xScale = d3.scaleBand()
        .domain(d3.extent(arr[0].data, d => d.date_visited))
        .range([0, width - margin]);

    var yScale = d3.scaleLinear()
        .domain([0, d3.max(arr[0].data, d => d.doc_count)])
        .rangeRound([height - margin, 0]);

    var color = d3.scaleOrdinal(d3.schemeCategory10);

    /* Add SVG */
    var svg = d3.select(".lc_top").append("svg")
        .attr("width", (width + margin))
        .attr("height", (height + margin))
        .append('g')
        .attr("transform", `translate(${margin}, ${margin})`);


    /* Add line into SVG */
    var area = d3.area()
        .x(d => xScale(d.date_visited))
        .y0(height - margin)
        .y1(d => yScale(d.doc_count));


    let lines = svg.append('g')
        .attr('class', 'lines')
        .attr('width', svgWidth + 200)
        .attr('height', svgHeight);


    lines.selectAll('.line-group')
        .data(arr).enter()
        .append('g')
        .attr('class', 'line-group')
        .on("mouseover", function (d, i) {
            svg.append("text")
                .attr("class", "title-text")
                .text(d.doc_count)
                .attr("text-anchor", "middle")
                .attr("x", (width - margin) / 2)
                .attr("y", 5);
        })
        .on("mouseout", function (d) {
            svg.select(".title-text").remove();
        })
        .append('path')
        .attr('fill', (d, i) => color(i))
        .attr('d', area)
        .style('stroke', (d, i) => color(i))
        .style('opacity', lineOpacity)
        .on("mouseover", function (d) {
            d3.selectAll('.area')
                .style('opacity', otherLinesOpacityHover);
            d3.selectAll('.circle')
                .style('opacity', circleOpacityOnLineHover);
            d3.select(this)
                .style('opacity', lineOpacityHover)
                .style("stroke-width", lineStrokeHover)
                .style("cursor", "pointer");
        })
        .on("mouseout", function (d) {
            d3.selectAll(".area")
                .style('opacity', lineOpacity);
            d3.selectAll('.circle')
                .style('opacity', circleOpacity);
            d3.select(this)
                .style("stroke-width", lineStroke)
                .style("cursor", "none");
        });


    /* Add circles in the line */
    lines.selectAll("circle-group")
        .data(arr).enter()
        .append("g")
        .style("fill", (d, i) => color(i))
        .selectAll("circle")
        .data(d => d.data).enter()
        .append("g")
        .attr("class", "circle")
        .on("mouseover", function (d) {
            d3.select(this)
                .style("cursor", "pointer")
                .append("text")
                .attr("class", "text")
                .text(`${d.doc_count}`)
                .attr("x", d => xScale(d.date_visited))
                .attr("y", d => yScale(d.doc_count) - 10);
        })
        .on("mouseout", function (d) {
            d3.select(this)
                .style("cursor", "none")
                .transition()
                .duration(duration)
                .selectAll(".text").remove();
        })
        .append("circle")
        .attr("cx", d => xScale(d.date_visited))
        .attr("cy", d => yScale(d.doc_count))
        .attr("r", circleRadius)
        .style('opacity', circleOpacity)
        .on("mouseover", function (d) {
            d3.select(this)
                .transition()
                .duration(duration)
                .attr("r", circleRadiusHover);
        })
        .on("mouseout", function (d) {
            d3.select(this)
                .transition()
                .duration(duration)
                .attr("r", circleRadius);
        });

    /* Add Axis into SVG */
    var xAxis = d3.axisBottom(xScale).ticks(7);
    var yAxis = d3.axisLeft(yScale).ticks(7);

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", `translate(0, ${height - margin})`)
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append('text')
        .attr("y", 15)
        .attr("transform", "rotate(-90)")
        .attr("fill", "#000")
        .text("Total value");

---

您可以使用d3时间刻度

---

我不能使用d3.scaleTime，因为我的日期被格式化为字符串，如8月29日、8月28日等等。@yuyu当然可以：只需使用d3.timeParse来解析字符串。@GerardoFurtado我已经使用它解析了我的数据，每当我使用d3.scaleTime时，x轴就会消失，这就是为什么我使用d3.scaleBand来代替。我这里唯一的问题是x轴只显示开始日期和结束日期，日期之间没有。@yuyu如果轴消失了，代码中还有其他问题。如果您有日期，请使用时间刻度，而不是波段刻度。关于频带比例的问题，这是预期的输出：d3.extent返回一个只有2个值的数组。所以，再一次，使用时间尺度。波段尺度是分类变量。时间不是一个分类变量，除非你想把时间单位当作年。对于折线图，如果数据中有时间（即日期），请使用时间刻度。这就是数据可视化编程101。

var x = d3.scaleTime()
    .domain([new Date(2000, 0, 1), new Date(2000, 0, 2)])
    .range([0, 960]);