antvis/G2

g2 v5版本折线图(line) 设置shape为smooth(曲线)后,对于中间出现连续0的场景画线异常 #5541

bfyq posted onGitHub

<!-- 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. 提交问题前,请先阅读 README 中的贡献帮助文档。 2. 我们推荐如果是小问题(错别字修改,小的 bug fix)直接提交 PR。 3. 如果是一个新需求,请提供:详细需求描述,最好是有伪代码实现。 4. 如果是一个 BUG,请提供:复现步骤,错误日志以及相关配置,并尽量填写下面的模板中的条目。 5. 如果可以,请提供尽可能精简的 CodePen 链接,可使用 CodePen 模板 https://codepen.io/leungwensen/pen/WXJgox,方便我们排查问题。 6. 扩展阅读:如何向开源项目提交无法解答的问题 -->

问题描述: 我实现了一个简单的折线图,用平滑的曲线画线,但是在中间遇到连续的0(先升后降再升场景)时,发现v5下的版本存在问题,想求助下是我v5配置的问题,还是v5就存在这样的问题(sorry, 文档阅读了半天,没找到什么有用信息,感觉v5文档看api稍微难理解) 这是之前v4版本下的样式截图: image 这是我在v5版本下的样式截图 image

  • G2 Version: g5 v5.1.2
  • Platform: web, g2官网示例编辑
  • Mini Showcase(like screenshots): 画线异常
  • CodePen Link:
import { Chart } from '@antv/g2';

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

chart
  .line()
  .data([
    {
      'date': '2-1',
      'close': 1,
    },
    {
      'date': '2-2',
      'close': 10,
    },
    {
      'date': '2-3',
      'close': 0,
    },
    {
      'date': '2-4',
      'close': 0,
    },
    {
      'date': '2-5',
      'close': 12,
    },
  ])
  .encode('x', 'date')
  .encode('y', 'close')
  .encode('connect', false)
  .style('shape', 'smooth');

chart.render();

目前曲线是用 d3-line 绘制的,传递参数的能力缺失。

posted by pearmini over 1 year ago

谢谢大佬们

posted by bfyq over 1 year ago

目前曲线是用 d3-line 绘制的,传递参数的能力缺失。

问下,什么版本会优化这个呀

posted by bfyq over 1 year ago

看了一下,这里有两种处理方法,第一种:

// 设置 alpha 参数,效果会好很多
chart.line().style('shape', 'smooth').style('alpha', 1);

第二种,使用 d3 的 curveMonotoneX 曲线生成器:

import { curveMonotoneX } from 'd3-shape';

chart.line().style('shape', 'smooth').style('curve', () => curveMonotoneX)
posted by pearmini over 1 year ago

image image 请问这属于同质问题嘛

posted by sqlyr over 1 year ago

对,应该是一类问题

posted by pearmini over 1 year ago

我试了下上面的方案,对我现在成图都不太友好,大改多久能修复呢

posted by sqlyr over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests