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
属性。 最佳答案
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!
关于javascript - react VX 图表 : React does not recognize the `xScale` prop on a DOM element,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53849710/