React Vis Horizontal Crosshair

Question

有没有办法显示十字线，使其水平而不是垂直？默认情况下，给定一个点列表，它会将垂直十字线捕捉到最近点的x值。

Answer 1

我能够创建一个自定义的Crosshair组件，这个解决方案有点麻烦，因为我使用的是库中没有公开的实用程序，如果升级版本，你需要小心。你可以在这里查一下https://codesandbox.io/s/react-vis-forked-t8hvz?file=/src/HorizontalCrosshair.js

与原始组件的重要区别在于：

从库获取导入

import { ScaleUtils } from "react-vis";
import { transformValueToString } from "react-vis/dist/utils/data-utils"; // hackish

更改道具类型以获得正确的边距并更改方向值

marginRight: PropTypes.number,
orientation: PropTypes.oneOf(["top", "bottom"]),

更改计算以找到顶部位置，而不是左侧

const y = ScaleUtils.getAttributeFunctor(this.props, "y");
const innerTop = y(value);
const {
orientation = innerTop > innerHeight / 2 ? "top" : "bottom"
} = this.props;
const right = marginRight;
const top = marginTop + innerTop;
const innerClassName = `rv-crosshair__inner rv-crosshair__inner--${orientation}`;

最后设置顶部和宽度，而不是左侧和高度

<div
className={"rv-crosshair horizontal"}
style={{
top: `${top}px`,
right: `${right}px`
}}
>
<div
className="rv-crosshair__line"
style={{ width: `${innerWidth}px`, ...style.line }}
/>

并添加一些CSS类来正确定位组件

styles.css

.rv-crosshair.horizontal .rv-crosshair__line {
height: 1px;
}
.rv-crosshair__inner {
right: 0;
}
.rv-crosshair__inner--bottom {
top: 4px !important;
}
.rv-crosshair__inner--top {
bottom: 4px !important;
top: unset;
}