The issue has been closed

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

JonasJonny posted onGitHub

问题描述

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

重现步骤

Unchanged link example with "facetRect.point()" (First mark) - Tooltip is working.

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

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();

posted by pearmini over 1 year ago

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.

posted by JonasJonny over 1 year ago

Fund this Issue

$0.00

Funded

Pull requests

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

问题描述

重现链接

重现步骤

预期行为

平台

屏幕截图或视频（可选）

补充说明（可选）

Company

Community

Support

Connect