Facet - Tooltip is active only for last mark. [SOLVED]

[JonasJonny]

问题描述

If you add more marks to the chart, only last one have active Tooltip.

重现链接

https://g2.antv.antgroup.com/en/examples/composition/facet#rect-row

重现步骤

1. Unchanged link example with "facetRect.point()" (First mark) - Tooltip is working.
2. We can add second mark

// First mark
facetRect
  .point()
  .encode('x', 'x')
  .encode('y', 'y');

// Second mark
facetRect
  .interval()
  .encode('x', 'x')
  .encode('y', 'series');

3. Tooltip is working only for interval "Second mark". Nothing shown for point "First mark" (Worked alone 1., Before 2.).
4. If we remove ".attr('inset', 10)" then points partly outside of facetRect have Tooltip.

预期行为

No response

平台

No response

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[pearmini]

That is because point and interval are rendered into two layers, one will overlap the other one. The right way is to wrap point and interval into a single view:

const chart = new Chart({
  container: 'container',
  width: 928,
  height: 320,
  paddingLeft: 60,
  paddingBottom: 60,
});

const facetRect = chart
  .facetRect()
  .data({
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/anscombe.json',
  })
  .encode('x', 'series');

const view = facetRect.view();

view
  .point()
  .attr('inset', 10)
  .encode('x', 'x')
  .encode('y', 'y')
  .style('stroke', '#000');

view.interval().encode('x', 'x').encode('y', 'series').style('stroke', '#000');

chart.render();

[JonasJonny]

Thank you @pearmini.
I started from https://g2.antv.antgroup.com/en/examples/composition/facet/#rect.
It was not clear to me that "gray points" are "disabled" automatically on purpose and not manually via options.
Now I can see the workflow.