antvis/G2

组件存在的问题 #4603

Aarebecca posted onGitHub

现有问题

  1. color 通道 scale 创建的组件没有颜色信息(填充颜色、透明度等) 例如 moviesPointBin、housePricePointShapes 中通过 size 通道的比例尺创建的图例没有颜色,期望图例颜色和节点颜色保持一致 对于这类情况,应当是需要创建一个常数比例尺 (Constant) 来映射到 color 通道,并结合 size 通道的比例尺合并为单一连续图例组件进行展示。

    <img width="300" alt="image" src="https://user-images.githubusercontent.com/25787943/215530797-efa7976e-432f-46f0-9c3f-a7b0bebc1496.png"> <img width="400" alt="image" src="https://user-images.githubusercontent.com/25787943/215538549-f3194a77-e286-4ae2-940d-d320b8bd2b90.png"> 同理的还有:

  1. shape 通道 scale 创建的组件没有形状信息,例如 athletesRectBin 中节点上矩形的,但图例并不能获取到相关信息。 同样是期望有一个常数比例尺来映射到 shape 通道。

    <img width="600" alt="image" src="https://user-images.githubusercontent.com/25787943/215535409-74c6ffba-5793-40ba-ab9d-58b5172b4545.png">

  2. 多通道 scale 需要合并为一个组件表达 例如 irisPointShapes,其 category 同时映射到了 shapecolor 通道,在当前逻辑下,分别生成了两个图例,而实际期望是将这两个通道合并为一个图例进行表达。

    <img width="800" alt="image" src="https://user-images.githubusercontent.com/25787943/215539322-b5a85fd3-bae4-41b4-8d24-a04ab90cba13.png">

思考

但做多通道 scale 合并之前,需要思考清楚,组件推断需要从过去 scalescoordinates 到 多个组件类型 的多对多映射转变为多对一的映射关系。 至于更具体的细节,例如同一编码字段的哪些可视化通道可以合并,是否支持不同编码字段进行合并等问题,主要取决于组件本身的表达能力,在当前的组件组织结构中,其实是很难表达和维护的。


  • 第一个问题
    • 图例合并 constant 比例尺
    • 调整 API
function render(container, ...) {}
  • 合并问题

    • category,color 和 shape 绑定到同一个字段
    • 任意种类的比例尺和 constant 比例尺
    • 不能合并就上下布局
  • marker 形状的问题:给 shape 指定 marker,暂时放在 shape.props 里面

function Shape() {
  return {
    shape() {},
    marker() {},
  }
}
posted by pearmini about 2 years ago
  • 本周
    • import { parseColor } from '@antv/g';
  • 下周
    • continuous 图例的颜色问题
    • 合并问题
    • 动画
  • 重构阶段
    • polar 下 plot 区域的的轴和四边的轴之间的间距
    • 翻页器的样式问题
    • 新雷达图的刻度问题
    • axis -> axisX, axisY, axisPosition
    • legend -> legendCategory, legendContinuous
    • 用户没有显示指定 component size 的时候,component 的充满 padding 区域。(cars3LineParallelVertical)
    • axis title 默认都在中间
    • legend title 样式
    • marker 的问题
    • component 配置改变
      const aixsOptions = {
      style: {
      layout: {},
      animate: {},
      data: {},
      style: {
        labelFilter: '',  // 滤镜
      }
      labelFilter: ()=>boolean,  // 过滤器
      },
      };
  • 正式版本之后:
    • legend 的布局问题,可以用户显示指定
    • 离散图例的默认布局问题(flex 和 grid)
posted by pearmini about 2 years ago

irisPointShapesDefaults irisPointShapes 两个例子的差别是后者手动设置了 scale.shape.range,结果差异是前者为图形描边,而后者为图形填充,感觉有点奇怪啊。 <img width="100" alt="image" src="https://user-images.githubusercontent.com/25787943/216496336-f17e6cda-c575-4549-9d7c-fd148e88c8e3.png"> <img width="100" alt="image" src="https://user-images.githubusercontent.com/25787943/216496362-19e55da6-2c6b-4949-a946-62883f924b91.png"> 这种情况图例要和图形保持一致的话还需要额外的样式信息,光颜色比例尺不太够

posted by Aarebecca about 2 years ago

Fund this Issue

$0.00
Funded

Pull requests