旭日图 view.filter 数据展示 Bug

[DremyGit]

• 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 这里就能复现

[visiky]

考虑用下 G2Plot 的旭日图？

[DremyGit]

考虑用下 G2Plot 的旭日图？

所以这 Bug 是不打算修了么？

G2Plot 也是以 G2 为底层的吧，如果 G2 无法解决这个 Bug，那么估计 G2Plot 也一样的吧

[visiky]

考虑用下 G2Plot 的旭日图？

所以这 Bug 是不打算修了么？

G2Plot 也是以 G2 为底层的吧，如果 G2 无法解决这个 Bug，那么估计 G2Plot 也一样的吧

1、G2 没有图表类型的概念，不会做 if-else 的处理；G2Plot 有图表类型的概念，会做一些特定的封装和处理。
2、先看下 G2Plot 有这个问题不，没有的话 参考下怎么处理的