Recharts：将工具提示光标定位在活动点上答案

【问题标题】：Recharts: Position tooltip cursor over active pointRecharts：将工具提示光标定位在活动点上
【发布时间】：2020-04-07 14:09:08
【问题描述】：

我正在创建带有工具提示的简单折线图。有没有办法将我的光标定位在活动点上而不是偏移（下图）。

【问题讨论】：

这个问题能回答你的问题吗？ github.com/recharts/recharts/issues/488
@keikai 我不想更改工具提示位置，我希望光标（鼠标）不与工具提示光标偏移。
@guitard00d123 关注这个问题？？？？您找到解决方案了吗？

标签： reactjs d3.js recharts

【解决方案1】：

很好的问题，ReCharts 文档中的答案绝对不是直截了当的。活动点的 X 和 Y 坐标实际上已经作为道具传递给您的自定义工具提示组件。

因此，如果您在自定义组件中注销 props，您将获得大量信息，其中包括您当前悬停的可视化中的数据点。

const DottedTooltip = (props) => {
console.log(props);
...

您需要通过解构它或从 props 访问它来获取所需的位置信息，然后使用它来设置诸如 <circle> svg 的 cx 属性或 <path> 之类的 d 属性。

这是我在 LineChart 上实现的虚线光标示例

const DottedTooltip = ({ points }) => {
  const xPos = points[0].x;

  return (
    <svg viewBox="0 0 509 156" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx={xPos} cy="1" r="1" fill="#919191" />
      <circle cx={xPos} cy="11" r="1" fill="#919191" />
      <circle cx={xPos} cy="21" r="1" fill="#919191" />
      <circle cx={xPos} cy="31" r="1" fill="#919191" />
      <circle cx={xPos} cy="41" r="1" fill="#919191" />
      <circle cx={xPos} cy="51" r="1" fill="#919191" />
      <circle cx={xPos} cy="61" r="1" fill="#919191" />
      <circle cx={xPos} cy="71" r="1" fill="#919191" />
      <circle cx={xPos} cy="81" r="1" fill="#919191" />
      <circle cx={xPos} cy="91" r="1" fill="#919191" />
      <circle cx={xPos} cy="101" r="1" fill="#919191" />
      <circle cx={xPos} cy="111" r="1" fill="#919191" />
      <circle cx={xPos} cy="121" r="1" fill="#919191" />
      <circle cx={xPos} cy="131" r="1" fill="#919191" />
      <circle cx={xPos} cy="141" r="1" fill="#919191" />
    </svg>
  );
};

最后注意：您需要确保将自定义 svg 的 viewBox 属性设置为等于整个图形的尺寸，以确保光标将在整个可视化中呈现。

【讨论】：