antvis / antvis/G2

[Bug]: 分面复合facetRect多漏斗图表-选中状态bug

Open
#6,935 0 comments 0 reactions 0 assignees View on GitHub
bug 🐛 OSCP
Dominant language
TypeScript
Stars
12.6k
Forks
1.7k
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug / 问题描述

分面复合facetRect多漏斗图表-问题:
选中一个漏斗时,我需要把其他漏斗的选中状态清空;
我的思路是点击元素后,先清空所有选中 `chart.emit('element:unselect', {});` ,
再单独选中点击的元素 `chart.emit('element:select', {data: { data: [{ id: 111 }] });` ,
但是结果只有最后一个漏斗能切换选中状态,前面的选中交互都失效了。
大概代码:
```javascript
chartObj.current = new Chart({ container: containerId.current });
let conf = ({
type: "interval",
autoFit: true,
paddingLeft: 40,
encode: { x: xField, y: yField, color: xField, shape: "funnel" },
tooltip: {
items: [{ field: yField, name: yFieldName || yField }]
},
transform: [{ type: "symmetryY" }],
scale: { x: { padding: 0.02 } },
coordinate: { transform: [{ type: "transpose" }] },
animate: { enter: { type: "fadeIn" } },
axis: { x: false, y: false },
legend: false,
frame: false,
state: {
selected: { opacity: 1 },
unselected: { opacity: 0.2 },
},
interaction: {
elementSelect: { single: true, region: true },
},
style: { cursor: 'pointer' },
labels: [
{
text: insideLabel || ((d) => d[xField]),
position: "inside",
transform: [{ type: "contrastReverse" }],
},
{
text: rightLabel || ((d) => d[yField]),
position: "left",
textAlign: "right",
},
],

});
chartObj.current.options({
type: "facetRect",
data: [],
encode: { x: groupField },
paddingTop: 10,
legend: false,
autoFit: true,
children: [conf]
})
chartObj.current.on('element:click', (e) => {
chart.emit('element:unselect', {});
chart.emit('element:select', {
data: { data: [e.data.data] },
});
})

```

### Reproduction link / 复现链接

_No response_

### Steps to Reproduce the Bug or Issue / 重现步骤

_No response_

### Version / 版本

🆕 5.x

### OS / 操作系统

- [x] macOS
- [ ] Windows
- [ ] Linux
- [ ] Others / 其他

### Browser / 浏览器

- [x] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他

Contributor guide

Open the contributing guide

Research direction

Start with the facetRect configuration and element click/select event flow shown in the report, then reproduce it in G2 5.x using the supplied chart setup. Done means selecting any funnel clears the other funnels while selection continues to work for every funnel.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.