如何解决React Vis 水平十字准线
有没有办法显示十字准线,使其水平而不是垂直?默认情况下,给定一个点列表,它将垂直十字准线捕捉到最近点的 x 值。
解决方法
我能够创建一个自定义的十字线组件,该解决方案有点笨拙,因为我使用的是库未公开的实用程序,如果升级版本,您需要小心。你可以在这里查看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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。