javascript - react VX 图表 : React does not recognize the `xScale` prop on a DOM element

Question

React VX 图表。我已经安装了所有必需的软件包。来自 VX 站点的代码:https://github.com/hshoff/vx

import React from 'react';
import { appleStock } from '@vx/mock-data';
import { Group } from '@vx/group';
import { scaleTime, scaleLinear } from '@vx/scale';
import { AreaClosed } from '@vx/shape';
import { AxisLeft, AxisBottom } from '@vx/axis';
import { LinearGradient } from '@vx/gradient';
import { extent, max } from 'd3-array';

const data = appleStock;

const width = 750;
const height = 400;

const x = d => new Date(d.date);
const y = d => d.close;

// Bounds
const margin = {
  top: 60,
  bottom: 60,
  left: 80,
  right: 80,
};
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;

const xScale = scaleTime({
  range: [0, xMax],
  domain: extent(data, x)
});
const yScale = scaleLinear({
  range: [yMax, 0],
  domain: [0, max(data, y)],
});

export default () => (
  <div>
    <svg width={width} height={height}>
      <Group top={margin.top} left={margin.left}>
        <AreaClosed
          data={data}
          xScale={xScale}
          yScale={yScale}
          x={x}
          y={y}
          fill={"url(#gradient)"}
          stroke={""}
        />
      </Group>
    </svg>
  </div>
)

我尝试运行此代码但出现此错误。如果我遗漏了什么，请告诉我。提前致谢。控制台错误:React 无法识别 DOM 元素上的 xScale 属性。

Answer 1

v0.0.181 中引入了重大更改。不是将 xScale 作为 prop 传递，而是像这样缩放 x 访问器中的返回值:

     <AreaClosed
        data={stock}
        x={d => xScale(xStock(d))}
        y={d => yScale(yStock(d))}
        yScale={yScale}
        strokeWidth={1}
        stroke={'url(#gradient)'}
        fill={'url(#gradient)'}
        curve={curveMonotoneX}
      />

有关最新示例，请参阅:https://vx-demo.now.sh/areas

有关所有重大更改的概述，请参阅:https://github.com/hshoff/vx/pull/383

希望对您有所帮助，感谢您查看 vx!