css - React Nivo 虚线

Question

我正在尝试创建一个反应 nivo 折线图，用虚线而不是实线。我已经研究过模式，但我不知道如何制作一个。任何帮助表示赞赏。

Answer 1

nivo 在库中提供了自定义图层功能，您可以使用它来自定义从实线到虚线的线

这是我为您制作的代码框。

https://codesandbox.io/s/wonderful-lumiere-ouhwv?file=/src/components/LineChart.js

在 ResponsiveLine 的图层属性中包含自定义图层

<ResponsiveLine
   ...
   layers={[ ..., DashedSolidLine] }
/>

自定义路径样式

const DashedSolidLine = ({ series, lineGenerator, xScale, yScale }) => {
  return series.map(({ id, data, color }, index) => (
    <path
      ...
      style={
        index % 2 === 0
          ? {
              // simulate line will dash stroke when index is even
              strokeDasharray: "3, 6",
              strokeWidth: 3
            }
          : {
              // simulate line with solid stroke
              strokeWidth: 1
            }
      }
  />
  ));
};