Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

散点图size设置很大的时候会超过坐标轴,此时外面的无法触发hover #6232

Closed
tal007 opened this issue May 17, 2024 · 1 comment

Comments

@tal007
Copy link

tal007 commented May 17, 2024

问题描述

官方demo为例。https://g2-v3.antv.vision/zh/examples/point/scatter#bubble

代码中,size修改为40

const colorMap = {
  Asia: Global.colors[0],
  Americas: Global.colors[1],
  Europe: Global.colors[2],
  Oceania: Global.colors[3]
};

fetch('../data/bubble.json')
  .then(res => res.json())
  .then(data => {
    const chart = new G2.Chart({
      container: 'container',
      forceFit: true,
      height: 500
    });
    chart.source(data);
  // 为各个字段设置别名
    chart.scale({
      LifeExpectancy: {
        alias: '人均寿命(年)'
      },
      Population: {
        type: 'pow',
        alias: '人口总数'
      },
      GDP: {
        alias: '人均国内生产总值($)'
      },
      Country: {
        alias: '国家/地区'
      }
    });
    chart.axis('GDP', {
      label: {
        formatter(value) {
          return (value / 1000).toFixed(0) + 'k';
        } // 格式化坐标轴的显示
      }
    });
    chart.tooltip({
      showTitle: false, // 不显示默认标题
      enterable: true
    });
    chart.legend('Population', false); // 该图表默认会生成多个图例,设置不展示 Population 和 Country 两个维度的图例
    chart.point().position('GDP*LifeExpectancy')
    .size('Population', [ 70, 65 ])
    .color('continent', val => {
      return colorMap[val];
    })
    .shape('circle')
    .tooltip('Country*Population*GDP*LifeExpectancy')
    .style('continent', {
      lineWidth: 1,
      strokeOpacity: 1,
      fillOpacity: 0.3,
      opacity: 0.65,
      stroke: val => {
        return colorMap[val];
      }
    });
    chart.on('point:mouseenter', ev => {
      chart.showTooltip(chart.getXY(ev.data._origin))
    })
    chart.render();
  });

然后hover这部分区域无法展示tooltip(下图是添加事件以后)
image

尝试修改为自己使用移入point现实tooltip,但是过坐标轴的时候会重新出发,推测是移入坐标轴重新算了。如果从坐标轴里面一到外面,加的事件会失效

重现链接

https://g2-v3.antv.vision/zh/examples/component/component#label-scatter

重现步骤

No response

预期行为

提供一些解决方案

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频(可选)

No response

补充说明(可选)

No response

@pearmini
Copy link
Member

pearmini commented Jun 4, 2024

v3 版本已经停止维护了,建议把 Population 的 scale type 设置为 log,减少 bubble 的大小。

@pearmini pearmini closed this as completed Jun 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants