React VX 图表：React 无法识别 DOM 元素上的“xScale”道具答案

【问题标题】：React VX Chart: React does not recognize the `xScale` prop on a DOM elementReact VX 图表：React 无法识别 DOM 元素上的“xScale”道具
【发布时间】：2019-05-19 20:32:09
【问题描述】：

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 属性。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

v0.0.181 中引入了重大更改。不是将 xScale 作为道具传递，而是像这样缩放 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！

【讨论】：