[Bug]: 分面复合facetRect多漏斗图表-选中状态bug
- 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
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