如何移除mark area的stroke的左下右三边？

[taoliujun]

问题描述

如上图中，给mark area配置了stroke，area的四周都给描边了。但是希望只要上边的描边，不需要左下右边的描边。
大概需要如下的效果（用mark line模拟的，和area不能紧紧贴合，可能留有缝隙）。

任务类型

初级任务

[hustcc]

确实是一个好问题。我们开始设计的时候，想着如果需要有描边的面积图，是使用 area + line 组合的方式。参考这个 DEMO：https://g2.antv.antgroup.com/examples/general/area/#area-gradient

保留 stroke 是原始的含义。

[pearmini]

用mark line模拟的，和area不能紧紧贴合，可能留有缝隙

@taoliujun 这个缝隙在哪里？

[taoliujun]

用mark line模拟的，和area不能紧紧贴合，可能留有缝隙

@taoliujun 这个缝隙在哪里？

line和area的边的贴合不紧密的情况。两者都设置了.encode('shape', 'smooth')。

[taoliujun]

确实是一个好问题。我们开始设计的时候，想着如果需要有描边的面积图，是使用 area + line 组合的方式。参考这个 DEMO：https://g2.antv.antgroup.com/examples/general/area/#area-gradient

保留 stroke 是原始的含义。

收到，我看了demo，经过调试发现，相邻数据跨度太大的时候容易触发“缝隙太大”的问题。在这个例子中刷新几次，可以看到问题：https://codesandbox.io/p/sandbox/jolly-moon-q9fnhx

[pearmini]

@taoliujun 这个问题可能是 line 和 area 用的 curve 不一致导致的，line 默认用的是 curveMonotoneX，但是 area 用的是 curveCatmullRom，感兴趣提一个 PR 吗？参考这个 PR：#5751

[taoliujun]

@pearmini 我不清楚curve的背景，不过我今天试试。

[pearmini]

@taoliujun 背景可以看看 D3 的相关文档，G2 就是直接用的 D3 Shape 里面的 Curve。

[taoliujun]

认领

[taoliujun]

@pearmini 将mark area的smooth curve改成和mark line smooth curve一样的，只是符合了这个issue的预期。

是否会影响别人的预期呢？甚至还要取消掉alpha参数呢。

[pearmini]

@taoliujun 好问题，这确实是一个 breaking change，但是影响很小，可以忽略。

[pearmini]

closed by: #5877