旭日图 view.filter 数据展示 Bug #2322

<!-- Thank you for reporting an issue. 1. It's RECOMMENDED to submit PR for typo or tiny bug fix. 2. If this's a FEATURE request, please provide: details, pseudo codes if necessary. 3. If this's a BUG, please provide: course repetition, error log and configuration. Fill in as much of the template below as you're able. 4. It will be nice to use to provide a CodePen Link which can reproduce the issue, we provide a CodePen template g2-github-issue. 感谢您向我们反馈问题。 1. 提交问题前，请先阅读 https://antv.alipay.com/zh-cn/g2/3.x/index.html 上的文档。 2. 我们推荐如果是小问题（错别字修改，小的 bug fix）直接提交 PR。 3. 如果是一个新需求，请提供：详细需求描述，最好是有伪代码实现。 4. 如果是一个 BUG，请提供：复现步骤，错误日志以及相关配置，并尽量填写下面的模板中的条目。 5. 如果可以，请提供尽可能精简的 CodePen 链接，可使用 CodePen 模板 https://codepen.io/leungwensen/pen/WXJgox，方便我们排查问题。 6. 扩展阅读：如何向开源项目提交无法解答的问题 -->

• G2 Version:

4.0.6

• Platform: PC chrome

• Mini Showcase(like screenshots):

  import DataSet from '@antv/data-set';
  import { Chart, registerInteraction } from '@antv/g2';
  

const data1 = [{"x":[0,0.2806584073983305,0.2806584073983305,0],"y":[0.5,0.5,0.3333333333333333,0.3333333333333333],"depth":2},{"x":[0,0.16503698665079503,0.16503698665079503,0],"y":[0.6666666666666666,0.6666666666666666,0.5,0.5],"depth":3},{"x":[0.16503698665079503,0.20173854764250743,0.20173854764250743,0.16503698665079503],"y":[0.6666666666666666,0.6666666666666666,0.5,0.5],"depth":3},{"x":[0.20173854764250743,0.20636000340107138,0.20636000340107138,0.20173854764250743],"y":[0.6666666666666666,0.6666666666666666,0.5,0.5],"depth":3},{"x":[0.20636000340107138,0.20982609521999435,0.20982609521999435,0.20636000340107138],"y":[0.6666666666666666,0.6666666666666666,0.5,0.5],"depth":3},{"x":[0.20982609521999435,0.21170168603109984,0.21170168603109984,0.20982609521999435],"y":[0.6666666666666666,0.6666666666666666,0.5,0.5],"depth":3},{"x":[0.21170168603109984,0.21299209250914042,0.21299209250914042,0.21170168603109984],"y":[0.6666666666666666,0.6666666666666666,0.5,0.5],"depth":3},{"x":[0.21299209250914042,0.21374232883358263,0.21374232883358263,0.21299209250914042],"y":[0.6666666666666666,0.6666666666666666,0.5,0.5],"depth":3},{"x":[0.21374232883358263,0.21400241075938925,0.21400241075938925,0.21374232883358263],"y":[0.6666666666666666,0.6666666666666666,0.5,0.5],"depth":3},{"x":[0.21400241075938925,0.28065840739833053,0.28065840739833053,0.21400241075938925],"y":[0.6666666666666666,0.6666666666666666,0.5,0.5],"depth":3}] const data2 = [{"x":[0,0.16503698665079503,0.16503698665079503,0],"y":[0.6666666666666666,0.6666666666666666,0.5,0.5],"depth":3},{"x":[0,0.04339867058123309,0.04339867058123309,0],"y":[0.8333333333333334,0.8333333333333334,0.6666666666666666,0.6666666666666666],"depth":4},{"x":[0.04339867058123309,0.0676913227666715,0.0676913227666715,0.04339867058123309],"y":[0.8333333333333334,0.8333333333333334,0.6666666666666666,0.6666666666666666],"depth":4},{"x":[0.0676913227666715,0.09179391508325123,0.09179391508325123,0.0676913227666715],"y":[0.8333333333333334,0.8333333333333334,0.6666666666666666,0.6666666666666666],"depth":4},{"x":[0.09179391508325123,0.10469297828816078,0.10469297828816078,0.09179391508325123],"y":[0.8333333333333334,0.8333333333333334,0.6666666666666666,0.6666666666666666],"depth":4},{"x":[0.10469297828816078,0.11386086617284445,0.11386086617284445,0.10469297828816078],"y":[0.8333333333333334,0.8333333333333334,0.6666666666666666,0.6666666666666666],"depth":4},{"x":[0.11386086617284445,0.12130321051131107,0.12130321051131107,0.11386086617284445],"y":[0.8333333333333334,0.8333333333333334,0.6666666666666666,0.6666666666666666],"depth":4},{"x":[0.12130321051131107,0.1285504934054227,0.1285504934054227,0.12130321051131107],"y":[0.8333333333333334,0.8333333333333334,0.6666666666666666,0.6666666666666666],"depth":4},{"x":[0.1285504934054227,0.13359208150567428,0.13359208150567428,0.1285504934054227],"y":[0.8333333333333334,0.8333333333333334,0.6666666666666666,0.6666666666666666],"depth":4},{"x":[0.13359208150567428,0.13861366330394073,0.13861366330394073,0.13359208150567428],"y":[0.8333333333333334,0.8333333333333334,0.6666666666666666,0.6666666666666666],"depth":4},{"x":[0.13861366330394073,0.1431500922790679,0.1431500922790679,0.13861366330394073],"y":[0.8333333333333334,0.8333333333333334,0.6666666666666666,0.6666666666666666],"depth":4},{"x":[0.1431500922790679,0.1475164676873215,0.1475164676873215,0.1431500922790679],"y":[0.8333333333333334,0.8333333333333334,0.6666666666666666,0.6666666666666666],"depth":4},{"x":[0.1475164676873215,0.15146771232938375,0.15146771232938375,0.1475164676873215],"y":[0.8333333333333334,0.8333333333333334,0.6666666666666666,0.6666666666666666],"depth":4},{"x":[0.15146771232938375,0.154938805723803,0.154938805723803,0.15146771232938375],"y":[0.8333333333333334,0.8333333333333334,0.6666666666666666,0.6666666666666666],"depth":4},{"x":[0.154938805723803,0.15795475574806064,0.15795475574806064,0.154938805723803],"y":[0.8333333333333334,0.8333333333333334,0.6666666666666666,0.6666666666666666],"depth":4},{"x":[0.15795475574806064,0.16078064590345958,0.16078064590345958,0.15795475574806064],"y":[0.8333333333333334,0.8333333333333334,0.6666666666666666,0.6666666666666666],"depth":4},{"x":[0.16078064590345958,0.16355151872839943,0.16355151872839943,0.16078064590345958],"y":[0.8333333333333334,0.8333333333333334,0.6666666666666666,0.6666666666666666],"depth":4},{"x":[0.16355151872839943,0.165036986650795,0.165036986650795,0.16355151872839943],"y":[0.8333333333333334,0.8333333333333334,0.6666666666666666,0.6666666666666666],"depth":4}];

const chart = new Chart({ container: 'container', autoFit: true, height: 500, });

chart.scale({ x: { // data1和data2都是从同一个数据源通过 view.filter() 筛选出来的，正常都应该展示两层环 // data1 把 nice 设为 false 就不展示内圈，data2 设置 nice 为false就正常 //nice: true, ncie: false }, y: { nice: false, }, });

chart.data(data1); //chart.data(data2);

chart.coordinate('polar', { innerRadius: 0.3, }); chart.tooltip({ showTitle: false, showMarkers: false, }); chart.axis(false); chart.legend(false);

chart .polygon() .position('x*y') .color('depth') .style({ stroke: '#FFF', lineWidth: 1, }) .tooltip(false);

// 还有必须要覆盖 trigger 才能正确响应事件，不然就卡住了，官方示例不这么写为被认为是交互BUG registerInteraction('element-active', { start: [{ trigger: 'polygon:mouseenter', action: 'element-active:active' }], end: [{ trigger: 'polygon:mouseleave', action: 'element-active:reset' }] }); chart.interaction('element-active');

chart.render();

```

• CodePen Link: 直接把上面代码贴到 https://g2.antv.vision/zh/examples/relation/relation#sunburst 这里就能复现

  <!-- Enter your issue details below this comment. -->