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',
  },
};