search

antvis / G2

📊 The concise and progressive visualization grammar.
https://g2.antv.antgroup.com
MIT License
12.08k stars 1.58k forks source link

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

Closed taoliujun closed 9 months ago

taoliujun commented 9 months ago

问题描述

image

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

image

任务类型

初级任务

hustcc commented 9 months ago

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

保留 stroke 是原始的含义。

pearmini commented 9 months ago

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

@taoliujun 这个缝隙在哪里？

taoliujun commented 9 months ago

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

@taoliujun 这个缝隙在哪里？

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

image image

taoliujun commented 9 months ago

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

保留 stroke 是原始的含义。

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

pearmini commented 9 months ago

@taoliujun 这个问题可能是 line 和 area 用的 curve 不一致导致的，line 默认用的是 curveMonotoneX，但是 area 用的是 curveCatmullRom，感兴趣提一个 PR 吗？参考这个 PR：https://github.com/antvis/G2/pull/5751

taoliujun commented 9 months ago

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

pearmini commented 9 months ago

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

taoliujun commented 9 months ago

认领

taoliujun commented 9 months ago

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

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

pearmini commented 9 months ago

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

pearmini commented 9 months ago

closed by: https://github.com/antvis/G2/pull/5877