添加时间范围后缺少数据

Question

我已经挣扎了好几个小时，但我不知道我做错了什么。也就是说，我的目标是显示一个线图，其中包含一定时间单位内的感染人数，其中 y 轴显示感染人数，x 轴显示时间范围。 图表应该是这样的：

但是，将时间范围添加到x轴后，与单位时间感染人数相关的线不再显示 图表是这样的：

svg 的路径好像做成了：

感谢您的帮助..

import React, { useEffect, useRef } from "react";
import { useSelector } from "react-redux";
import {
  select,
  line,
  curveCardinal,
  scaleLinear,
  max,
  scaleTime,
  axisBottom,
  axisLeft,
  extent,
} from "d3";

const ChartFirstCase = () => {
  const fromFirstDayData = useSelector((state) => state.fromFirstDayData);
  const { allData } = fromFirstDayData;

  const cases = allData ? allData.map((data) => data.Cases) : [];
  const dates = allData ? allData.map((data) => data.Dates) : [];

  const getDate = (dateValue) => {
    const date = dateValue;
    return new Date(date);
  };

  const days = extent(dates);
  const minDate = getDate(days[0]);
  const maxDate = getDate(days[1]);

  const sorting = (a, b) => a - b;
  cases.sort(sorting);

  const svgRef = useRef();
  const svgHeight = 200;
  const svgWidth = 400;

  useEffect(() => {
    const svg = select(svgRef.current);

    const maxProp = allData
      ? max(allData.map((broj) => broj.Cases))
      : "";

    const xScale = scaleTime().domain([minDate, maxDate]).range([0, 400]);
    const yScale = scaleLinear()
      .domain([0, maxProp + 50000])
      .range([200, 0]);

    const xAxis = axisBottom(xScale).ticks(5);
    const yAxis = axisLeft(yScale).ticks(5);

    svg.select(".x-axis").style("transform", "translateY(200px)").call(xAxis);
    svg.select(".y-axis").call(yAxis);

    const casesLine = line()
      .x((value, index) => xScale(index))
      .y(yScale)
      .curve(curveCardinal);

    svg
      .selectAll(".line")
      .data([cases])
      .join("path")
      .attr("class", "line")
      .attr("d", casesLine)
      .attr("fill", "none")
      .attr("stroke", "red");
  }, [cases, allData, minDate, maxDate]);

  return (
    <div className="chartsBox">
      <div className="chartBox">
        <svg width={svgWidth} height={svgHeight} ref={svgRef}>
          <g className="x-axis" />
          <g className="y-axis" />
        </svg>
      </div>
    </div>
  );
};

export default ChartFirstCase;

Answer 1

如您所见，路径在那里，但 x 坐标完全关闭。可能的原因是您在 strings 上使用了d3.extent。当你这样做时，10 会出现在 9 之前。

因此，从一开始就将所有内容转换为日期对象，并删除 getDate 函数：

const dates = allData ? allData.map((data) => new Date(data.Dates)) : [];

但是，这还不够，因为您只传递了 cases 作为数据，并将每个对象的索引传递给 x 比例：

const casesLine = line()
  .x((value, index) => xScale(index))
  .y(yScale)
  .curve(curveCardinal);

取而代之的是，使用包含日期和案例的数据数组，并相应地更改行生成器。例如：

const casesLine = line()
  .x((value) => xScale(value.date))
  .y((value) => yScale(value.case))
  .curve(curveCardinal);