fix: the mouse position is offset of dodgeX tooltip event (#6418)

* fix: the mouse position is offset of dodgeX tooltip event

* fix: ci

__tests__/integration/chart-emit-show-tooltip.spec.ts

@@ -0,0 +1,69 @@
+import './utils/useSnapshotMatchers';
+import { Chart } from '../../src';
+import { createNodeGCanvas } from './utils/createNodeGCanvas';
+import { sleep } from './utils/sleep';
+import { dispatchFirstElementPointerMoveEvent } from './utils/event';
+import { kebabCase } from './utils/kebabCase';
+
+const data = [
+  { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
+  { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
+  { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
+  { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
+  { name: 'London', 月份: 'May', 月均降雨量: 47 },
+  { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
+  { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
+  { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
+  { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
+  { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
+  { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
+  { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
+  { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
+  { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
+  { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
+  { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
+];
+
+function renderColumn({ canvas, container }) {
+  const chart = new Chart({ canvas, container });
+  chart.options({
+    type: 'interval',
+    data,
+    encode: { x: '月份', y: '月均降雨量', color: 'name' },
+    transform: [{ type: 'dodgeX' }],
+    style: {
+      inset: 0,
+    },
+    interaction: { tooltip: { shared: false } },
+  });
+  const finished = chart.render();
+  return { chart, finished };
+}
+
+describe('chart.emit', () => {
+  const dir = `${__dirname}/snapshots/api/${kebabCase('chartEmitShowTooltip')}`;
+  const columnCanvas = createNodeGCanvas(640, 480);
+
+  it('chart.emit tooltip', async () => {
+    const { finished, chart } = renderColumn({
+      canvas: columnCanvas,
+      container: document.createElement('div'),
+    });
+    await finished;
+
+    chart.emit('tooltip:show', {
+      offsetY: 0,
+      data: { data: { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 } },
+    });
+    await sleep(20);
+
+    await expect(columnCanvas).toMatchDOMSnapshot(dir, 'step0', {
+      fileFormat: 'html',
+      selector: '.g2-tooltip',
+    });
+  });
+
+  afterAll(() => {
+    columnCanvas?.destroy();
+  });
+});

__tests__/integration/snapshots/api/chart-emit-show-tooltip/step0.html

@@ -0,0 +1,46 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="g2-tooltip"
+  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: sans-serif; left: 611.2708966982445px; top: 61px;"
+>
+  <div
+    class="g2-tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    Aug.
+  </div>
+  <ul
+    class="g2-tooltip-list"
+    style="margin: 0px; list-style-type: none; padding: 0px;"
+  >
+    <li
+      class="g2-tooltip-list-item"
+      data-index="0"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="g2-tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="g2-tooltip-list-item-marker"
+          style="background: rgb(0, 201, 201); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="月均降雨量"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          月均降雨量
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="42.4"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        42.4
+      </span>
+    </li>
+  </ul>
+</div>

src/interaction/tooltip.ts

@@ -1000,7 +1000,7 @@ export function tooltip(
   const scaleSeries = scale.series;
   const bandWidth = scaleX?.getBandWidth?.() ?? 0;
   const xof = scaleSeries
-    ? (d) => d.__data__.x + d.__data__.series * bandWidth
+    ? (d) => d.__data__.x
     : (d) => d.__data__.x + bandWidth / 2;
 
   // Sort for bisector search.
@@ -1018,8 +1018,7 @@ export function tooltip(
     ? (event) => {
         const mouse = mousePosition(root, event);
         if (!mouse) return;
-        const [normalizedX] = coordinate.invert(mouse);
-        const abstractX = normalizedX;
+        const [abstractX] = coordinate.invert(mouse);
         const search = bisector(xof).center;
         const i = search(elements, abstractX);
         const target = elements[i];