javascript - Nivo 响应线图仅响应于变宽，而不是变窄

Question

我正在尝试使用 nivo 制作响应式折线图.

我用这个 MWE 重新创建了我的尝试:

import React, { useState, useEffect } from "react";
import { ResponsiveLine } from "@nivo/line";
import styled from "styled-components";

const HoursGraphWrapper = styled.div`
  display: grid;
  grid-template-rows: 300px;
  grid-template-columns: 1fr;
  grid-gap: 10px;
`;

const useWindowWidth = () => {
  let width, setWidth;
  if (typeof window !== "undefined") {
    [width, setWidth] = useState(window.innerWidth);
  } else {
    [width, setWidth] = useState(1001);
  }

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  });

  return width;
};

const TestGraph = () => {
  const width = useWindowWidth();

  return (
    <HoursGraphWrapper>
      <ResponsiveLine
        data={[
          {
            id: "A",
            data: [
              { x: "2019-01-11", y: 11 },
              { x: "2019-01-12", y: 20 },
              { x: "2019-01-13", y: 24 },
              { x: "2019-01-14", y: 25 },
              { x: "2019-01-15", y: 15 },
              { x: "2019-01-16", y: 50 },
              { x: "2019-01-17", y: 30 },
              { x: "2019-01-18", y: 31 }
            ]
          },
          {
            id: "B",
            data: [
              { x: "2019-01-11", y: 30 },
              { x: "2019-01-12", y: 24 },
              { x: "2019-01-13", y: 22 },
              { x: "2019-01-14", y: 15 },
              { x: "2019-01-15", y: 35 },
              { x: "2019-01-16", y: 45 },
              { x: "2019-01-17", y: 20 },
              { x: "2019-01-18", y: 11 }
            ]
          }
        ]}
        colors={{ scheme: "set1" }}
        xScale={{
          type: "time",
          format: "%Y-%m-%d",
          precision: "day"
        }}
        xFormat="time:%Y-%m-%d"
        yScale={{
          type: "linear",
          stacked: false
        }}
        axisLeft={{
          format: value => `${value}hr`,
          legend: "Total Hours",
          legendOffset: -50,
          legendPosition: "middle"
        }}
        axisBottom={{
          format: "%b %d",
          legend: "Date",
          legendOffset: 36,
          legendPosition: "middle",
          tickValues: width < 1000 ? 5 : undefined
        }}
        curve="monotoneX"
        enablePoints={width > 1000}
        pointBorderWidth={1}
        useMesh={true}
        enableSlices={false}
        margin={{ top: 10, right: 20, bottom: 60, left: 80 }}
        animate={true}
      />
    </HoursGraphWrapper>
  );
};

export default TestGraph;

如果我让浏览器变宽 - 折线图会像您预期的那样响应，填充空间。

我遇到的问题是，如果我使浏览器变窄，则图形不会调整大小以填充 100% 的浏览器宽度，就像我将其变宽时那样。对于新的浏览器宽度来说，它仍然太宽了。有趣的是，刷新时图表总是占据浏览器的 100%。

如何在浏览器变宽和变窄时让图表100%占据浏览器？

Answer 1

我已经解决了这个问题，感谢这个关于 SO 的问题和答案:Flex items not shrinking when window gets smaller

解决方案是在 ResponsiveLine 图形周围添加一个 div 包装器，样式如下:

最小宽度:0;