Spec 调整

[pearmini]

Spec 调整

在写案例和实现的时候发现 spec 的一些可以优化的点。

mark

一个完整的 Mark 拥有的配置如下：

const mark = {
  // Layout
  x: number,
  y: number,
  width: number,
  height: number,
  padding: number,
  paddingLeft: number,
  paddingRight: number,
  paddingTop: number,
  paddingBottom: number,
  inset: number,
  insetLeft: number,
  insetRight: number,
  insetTop: number,
  insetBottom: number,
  margin: number,
  marginLeft: number,
  marginRight: number,
  marginTop: number,
  marginBottom: number,

  // Mapping
  data: Object,
  encode: Object,
  layout: Object,
  transform: Array,
  scale: Object,
  coordinate: Object, // update

  // Atheistic
  style: Object,
  animate: Object,
  state: Object, // add
  theme: Object,

  // Interaction
  interaction: Object, // update

  // Components
  legend: Object, // update
  axis: Object, // update
  scrollbar: Object, // update
  slider: Object, // update
  tooltip: Object, // update
  title: Object, // update
  labels: Array, // update

  // Others
  connectNull: boolean
};

mark.coordinate

目前的 mark.coorindates 严格来讲并不是坐标系，而是坐标系变换。存在的问题：

• 过于灵活
• 不够语义化
• 和 4.0 的概念不兼容

所以做如下的改变：一个坐标系等于一个主体坐标系变化 + 一系列普通变换

// Before
const mark = {
  coordinates: [{ type: 'polar'} , { type: 'transpose' }, { type: 'scale' } ],
};

// After
const mark = {
  coordinate: {
    type: 'polar', // 主体
    transform: [{ type: 'transpose' }, { type: 'scale' }], // 普通变换
  },
};

这样的调整也和 d3-geo 里面 projection 相关的设计不谋而合。所以这样调整之后，G2 设置地图投影的 API 如下。

// Before
const mark = {
  projection: { type: 'naturalEarth1' },
}

// After
const mark = {
  coordinate: { type: 'naturalEarth1' },
}

这之后支持的主体坐标系变化如下：

• cartesian
• polar
• theta
• parallel
• polarParallel
• radial
• [d3-projection-type]

普通变换如下：

• transpose
• fisheye
• scale
• translate
• ....

mark.interaction

#4574

// Before
const mark = {
  interactions: [{ type: 'tooltip' }, { type: 'elementHighlight' }],
};

// After
const mark = {
  interaction: {
    tooltip: {},
    elementHighlight: {},
  },
};

mark.axis

axis 因为其实也是一种 mark，所以 spec 应该和 mark 类似，不应该把所有的配置混合在一起。混合在一起有一些问题：

• 命名冲突
• 不能知道那些配置需要透传，哪些不需要
• 没有地方配置动画

所以如下调整。

// Before
const mark = {
  axis: {
    x: {
      tickFormat,
      tickFill,
      labelTransform: [],
    },
  },
};

// After
const mark = {
  axis: {
    x: {
      tickFormat,
      transform: [],
      style: {
        tickFill: '',
      },
    },
  },
};

所以 component 的配置会和普通 Mark 保持一致

const component = {
  x,
  y,
  width,
  height,
  data: {},
  encode: {},
  style: {},
  transform: {},
  animate: {},
  interaction: {},
};

mark.legend

同 mark.axis

mark.state

#4506

view.coordinate

mark 的坐标系会合并作为 view 的坐标系，这样使得 mark 可以有独立的坐标系描述，有利于上层封装带坐标系的 mark。

const view = {
  type: 'view',
  children: [
    { type: 'interval', coordinate: { type: 'polar' } },
    { type: 'text' },
  ],
};

// Equal To
const view = {
  type: 'view',
  coordinate: { type: 'polar' },
  children: [
    { type: 'interval'},
    { type: 'text' },
  ],
}

// Composite Mark 
function Rose() {
  return  { type: 'interval', coordinate: { type: 'polar' } },
}

const view = {
  type: 'view',
  children: [{ type: Rose }, { type: 'text' }],
};

view.interaction

mark 的 interaction 会合并作为 view 的 interaction，这样使得 mark 可以有独立的 interaction 描述，有利于上层封装带 interaction 的 mark。

const view = {
  type: 'view',
  children: [
    { type: 'sankey', interaction: { drag: {} } },
    { type: 'text' },
  ],
};

// Equal to 
const view = {
  type: 'view',
  children: [{ type: 'sankey' }, { type: 'text' }],
  interaction: { drag: {} },
};

// Composite Mark 
function Snakey() {
  return { type: 'sankey', interaction: { drag: {} } },
}

const view = {
  type: 'view',
  children: [{ type: Snakey }, { type: 'text' }],
};

view.encode

view 的 encode 会传递给孩子并且合并。这个设计是合理的，可以参考 vega 的设计。

const view = {
  type: 'view',
  encode: {
    x: 'date',
    y: 'value',
  },
  children: [{ type: 'line' }, { type: 'point' }],
};

// 效果上与下面这种相同
// 但是内部只会计算一次（后面的工作）
const view = {
  type: 'view',
  children: [
    {
      type: 'line',
      encode: {
        x: 'date',
        y: 'value',
      },
    },
    {
      type: 'point',
      encode: {
        x: 'date',
        y: 'value',
      },
    },
  ],
};

view.transform

view 的 transform 会传递给孩子，并且把孩子的 transform 添加到后面。这个设计是合理的，可以参考 vega 的设计。

const view = {
  type: 'view',
  transform: [{ type: 'stackY' }],
  encode: {
    x: 'date',
    y: 'value',
  },
  children: [
    { type: 'line' },
    { type: 'point', transform: [{ type: 'sample' }] },
  ],
};

// 效果上与下面这种相同
// 但是内部只会计算一次（后面的工作）
const view = {
  type: 'view',
  children: [
    {
      type: 'line',
      transform: [{ type: 'stackY' }],
      encode: {
        x: 'date',
        y: 'value',
      },
    },
    {
      type: 'point',
      transform: [{ type: 'stack' }, { type: 'sample' }],
      encode: {
        x: 'date',
        y: 'value',
      },
    },
  ],
};

[Aarebecca]

• coordinate 那块，polarParallel 用 radar 描述会更语义化一些吧
• 另外后面属性继承那块，如果children指定了同名属性的话，像 encode 应该是覆盖，transform 应该是合并对吧