Add Force Mark

[pepper-nice]

API 设计

import { json } from 'd3-fetch';
import { G2Spec } from '../../../src';
export async function miserableForceCustom(): Promise<G2Spec> {
  const data = await json('data/miserable.json');
  return {
    type: 'force',
    data: {
      value: data,
    },
    layout: {
      // 节点散开/聚合
      disjoint: true,
      // 模拟 node 间的引力
      nodeStrength: (d) => 10,
      // 模拟 link 间的引力
      linkStrength: (d) => 1,
    },
    encode: {
      source: 'source',
      target: 'target',
      // 映射连接线的宽度
      value: 'value',
      // 映射 node 半径
      nodeRadius: (d) => d.radius,
      nodeKey: 'id',
      nodeColor: 'group',
      linkColor: (d) => d.source,
    },
    scale: {},
    style: {},
  };
}

实现思路

力导向图连接线使用 Link Mark 绘制，节点使用 Point Mark 绘制。

const DEFAULT_LINK_OPTIONS = {
  type: 'link',
  encode: {
    x: 'x',
    y: 'y',
    shape: 'link',
  },
};
const DEFAULT_NODE_OPTIONS = {
  type: 'point',
  encode: {
    x: 'x',
    y: 'y',
    shape: 'point',
  },
};

[pearmini]

nodeId，改成 nodeKey，在 encode 里面声明，参考 Sankey 的实现。

const options = {
  encode: {
    nodeKey: d => d.key
  }
}

[hustcc]

这个是否已经完成了？完成就关闭了哈，然后后续设计讨论放到 discussion~