antvis / antvis/F2

条形图在加入Pan手势且canvas不在(0, 0)的情况,触摸点位置不正确

Open
#673 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
8k
Forks
637
PR merge metrics
No merged PRs in 30d

Description

- [x] I have searched the [issues](https://github.com/antvis/f2/issues) of this repository and believe that this is not a duplicate.

### Reproduction link
[https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/pan-for-line-chart.html](https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/pan-for-line-chart.html)

### Steps to reproduce
##### 1.打开demo链接:https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/pan-for-line-chart.html
##### 2.用下面代码替换模版全部代码:

```javascript




F2 图表组件库 - AntV

/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;






$.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/f2/linear-pan.json', function(data) {
var chart = new F2.Chart({
id: 'mountNode',
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
release: {
min: 1990,
max: 2010
}
});
chart.tooltip({
showCrosshairs: true,
showItemMarker: false,
background: {
radius: 2,
fill: '#1890FF',
padding: [3, 5]
},
nameStyle: {
fill: '#fff'
},
onShow: function onShow(ev) {
var items = ev.items;
items[0].name = items[0].title;
}
});
chart.interval().position('release*count');
chart.interaction('pan');
chart.scrollBar({
mode: 'x',
xStyle: {
offsetY: -5
}
});
chart.coord({
transposed: true
});

// 绘制 tag
chart.guide().tag({
position: [1969, 1344],
withPoint: false,
content: '1,344',
limitInPlot: true,
offsetX: 5,
direct: 'cr'
});
chart.render();
});

```

### What is expected?
触摸点是正确的,选中手指位置的数据

### What is actually happening?
触摸点向下偏移,偏移量为canvas的y值

| Environment | Info |
|---|---|
| f2 | 3.4.2 |
| System | Mac 10.15 |
| Browser | Chrome 77.0.3865.90 |

Contributor guide

Open the contributing guide

Research direction

Start with the linked pan-for-line-chart reproduction and inspect F2's pan interaction handling for touch coordinates when the canvas has a nonzero page offset. Reproduce the downward offset with the provided example, then verify that touching a bar selects the data at the finger position even when the canvas is below the page origin.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.