[4.0] bug & 优化汇总

[hustcc]

常驻、置顶，直到全部修复。所有 bugfix 的 pr ref 到这个 issue。

[hustcc]

http://localhost:8000/zh/examples/bar/basic#time-bar

scale 中的 time 返回的 ticks 有问题，不是对应的日期，而是返回的小时。然后导致 tick 有相同，触发 component 的错误。这个我改成传入 component 加上 id 解决。time scale 的问题在 scale 修复之后自动解决。

[hustcc]

http://localhost:8000/zh/examples/bar/basic#time-bar

• [x] scale 之后，布局错误导致图例遮挡。

[simaQ]

• [x] 当两个 view 的绘制区域相同时，一个 view 有图例，一个 view 没有图例，自动布局后两个 view 没有重合，默认对于绘制区域相同的 view，应该做一下 coordinateBBox 的同步。

复现 demo: http://localhost:8000/zh/examples/gallery/area#area7

@hustcc

[hustcc]

http://localhost:8000/zh/examples/box/box#radial-box

这个我测试是 ok 的，有什么特殊的复现步骤吗？

[simaQ]

• [x] chart.filter() 后 chart.render(true) 的图例状态同步

[simaQ]

http://localhost:8000/zh/examples/box/box#radial-box

这个我测试是 ok 的，有什么特殊的复现步骤吗？

DEMO 代码有更新，合掉我的分支~~~

import { DataView } from '@antv/data-set';
import { Chart } from '@antv/g2';

const data = [
  { x: 'Oceania', low: 1, q1: 9, median: 16, q3: 22, high: 24 },
  { x: 'East Europe', low: 1, q1: 5, median: 8, q3: 12, high: 16 },
  { x: 'Australia', low: 1, q1: 8, median: 12, q3: 19, high: 26 },
  { x: 'South America', low: 2, q1: 8, median: 12, q3: 21, high: 28 },
  { x: 'North Africa', low: 1, q1: 8, median: 14, q3: 18, high: 24 },
  { x: 'North America', low: 3, q1: 10, median: 17, q3: 28, high: 30 },
  { x: 'West Europe', low: 1, q1: 7, median: 10, q3: 17, high: 22 },
  { x: 'West Africa', low: 1, q1: 6, median: 8, q3: 13, high: 16 },
];
const dv = new DataView().source(data);
dv.transform({
  type: 'map',
  callback: (obj) => {
    obj.range = [obj.low, obj.q1, obj.median, obj.q3, obj.high];
    return obj;
  },
});
const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});
chart.data(dv.rows);
chart.scale('range', {
  max: 35,
});
chart.axis('range', {
  grid: {
    line: {
      type: 'circle',
    },
  },
});
chart.tooltip({
  showTitle: false,
  itemTpl:
    '<li class="g2-tooltip-list-item" data-index={index} style="margin-bottom:4px;">' +
    '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' +
    '{name}<br/>' +
    '<span style="padding-left: 16px">最大值：{high}</span><br/>' +
    '<span style="padding-left: 16px">上四分位数：{q3}</span><br/>' +
    '<span style="padding-left: 16px">中位数：{median}</span><br/>' +
    '<span style="padding-left: 16px">下四分位数：{q1}</span><br/>' +
    '<span style="padding-left: 16px">最小值：{low}</span><br/>' +
    '</li>',
});
chart.coordinate('polar', { innerRadius: 0.5 });
chart
  .schema()
  .position('x*range')
  .shape('box')
  .size(60)
  .color('x')
  .tooltip('x*low*q1*median*q3*high', (x, low, q1, median, q3, high) => {
    return {
      name: x,
      low,
      q1,
      median,
      q3,
      high,
    };
  });
chart.render();

[simaQ]

• [x] grid 更新动画没有生效

G2 会在 component.update() 方法中 https://github.com/antvis/G2/blob/4.x/src/chart/controller/axis.ts#L314 将 animate: true 以及 animateOption 的属性传入，但是 component 层并没有按照传入的配置将 animate 属性更新为 true.

@dxq613

[simaQ]

• [x] http://localhost:8000/zh/examples/area/stacked#streamgraph 绘制失败

原因： 图例没有按照传入的 maxWidth 进行布局导致的。

 chart.legend(false);

即可绘制正确。

@dxq613

https://github.com/antvis/g/issues/316

[hustcc]

组件 bbox 问题，导致轴被画布裁剪。@dxq613 line 没有绘制，所以 bbox 不正确。

[simaQ]

交互行为相关问题整理

@dxq613

• [x] hightlight 交互，当鼠标移入 tooltip 再移入画布时，原先高亮的 shape 没有恢复至原始状态

• [x] 图例项表现出被剪切的样子 http://localhost:8000/zh/examples/interaction/interaction#legend-active

• [x] 分类图例过滤有问题 http://localhost:8000/zh/examples/interaction/interaction#legend-filter

• [x] 连续图例过滤不生效，同时连续图例中间部分未提供拖拽功能 http://localhost:8000/zh/examples/interaction/interaction#continue-legend-filter

• [x] 饼图选中的交互，在恢复原始状态时加上动画体验会更好 http://localhost:8000/zh/examples/interaction/interaction#pie-selected

• [x] 框选交互在空白处框选时，图表就卡住了，并且无法 reset

http://localhost:8000/zh/examples/interaction/interaction#element-brush

• [x] 拖拽交互没有生效 http://localhost:8000/zh/examples/interaction/interaction#drag-move
• [x] 缩放交互亦没有生效 http://localhost:8000/zh/examples/interaction/interaction#zoom

[dxq613]

交互行为相关问题整理

我定位了一下：

• 1，2 ，4 是 G 的 bug，已经告诉诸岳，G 修复后升级即可
• 2 是 legend controller 生成、更新 items 时没有同步选中状态，我跟逍为一起解决
• 3 的 interaction 名称写错了，拖拽功能在 legend 上增加
• 5 拖拽交互待 scale 改造完成后增加
• 6 框选空白处卡死，是 bug

本周应该能够修复大部分，scale 相关的一起解决

[simaQ]

• [x] chart.animate(false) 后，组件动画没有关闭 @simaQ

[simaQ]

• [x] axis 更新动画 @hustcc

直接调用 chart.changeSize(); 复现，必现

[simaQ]

@hustcc

• [x] http://localhost:8000/zh/examples/pie/nested 嵌套饼图绘制出错

• [x] 多 view padding 没有对齐 http://localhost:8000/zh/examples/heatmap/heatmap#kernel-smooth-density

[simaQ]

• [x] 图例被截取 @hustcc

复现 demo:

const data = [
      { genre: 'Sports', sold: 275 },
      { genre: 'Strategy', sold: 115 },
      { genre: 'Action', sold: 120 },
      { genre: 'Shooter', sold: 3500 },
      { genre: 'Other', sold: 150 }
    ];

    const chart = new Chart({
      container: createDiv(),
      autoFit: false,
      width: 380,
      height: 300,
    });

    chart.data(data);
    chart.scale('sold', {
      max: 3600,
      nice: false,
    });
    // chart.coordinate().transpose();
    chart.interval().position('genre*sold').color('genre').label('sold');

    chart.render();

[hustcc]

• zh/examples/pie/nested

chart 和子 view 之间的 coordinateBBox 不会进行 同步。但是有两个解法：

1. 分成 innerView 和 outerView 两个子 view，然后 padding 设置一样（或者 chart 设置即可）
2. chart 上绘制 inner，outerView 一个子 view，那么设置 outerView的 padding 设置为 0（现在是继承 chart 的 padding）

[simaQ]

• [x] @zqlu https://github.com/antvis/G2/blob/237b4c7fee5e6199c47a410bd47d89d1356911ef/examples/component/component/demo/guide-region-filter-realtime-data.ts#L1-L6

关联 issue: https://github.com/antvis/G2/issues/1949

[simaQ]

• [x] mirror 类型 Facet，showTitle 配置未生效 @hustcc

[simaQ]

• [x] facet title 的样式不美观~~~ @hustcc

http://localhost:8000/zh/examples/funnel/funnel#symmetric

[simaQ]

• [ ] http://localhost:8000/zh/examples/funnel/funnel#comparision 坐标系 scale, reflect 这些又不生效了！ @hustcc

chart
  .coordinate('rect')
  .transpose()
  .scale(1, -1);

http://localhost:8000/zh/examples/map/map#bubble-map

Important

必须写测试用例保证了！！！

[simaQ]

伙伴们很给力，就此结贴！