Question

我有一个折线图，显示两个不同类别的数据。我已经生成了图表，但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");

Here's the graph:

Answer 1

您可以使用d3时标。

https://github.com/d3/d3-scale/blob/v2.2.2/README.md#time-scales

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

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

1 个答案: