快速上手

安装

$ npm install @antv/graphin --save

第一个例子

这是一个最简单的 Graphin 组件的在线演示。访问 https://codesandbox.io/s/data-driven-fkue0 创建一个 CodeSandbox 的在线示例，别忘了保存以创建一个新的实例。通过 CodeSandbox，我们可以不用去配那些琐碎的 React 脚手架，快速尝鲜。

01. 渲染数据

Graphin 使用起来就像普通的组件一样，它只有一个必选属性 data，内部会对其进行数据校验，data 的数据结构有一定的要求，详情参考：核心概念/Data 数据驱动。

Graphin 提供一个 Mock 函数，帮助我们快速生成一些图数据，让我们试试看吧：

import React from 'react';
import ReactDOM from 'react-dom';
import Graphin, { Utils } from '@antv/graphin';
import "@antv/graphin/dist/index.css"; // 引入Graphin CSS
import './styles.css';
const App = () => {
    const data = Utils.mock(10).graphin();
    return (
        <div className="App">
            <Graphin data={data} />
        </div>
    );
};
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

这个例子的效果可以看上一节中的 Sandbox 例子。

02. 使用布局

Graphin 组件内置了 6 种布局，默认提供布局为 concentric（同心圆布局）。我们可以根据自己业务的不同来调整布局。比如，我们希望节点按照里力导（force）排列。让我们来调整上述的代码：

-  <Graphin data={data} />
+  <Graphin data={data} layout={{name:"force"}}/>

效果如下：

03. 配置 Node 和 Edge 样式

想要修改 Graphin 的节点和边的样式，我们可以直接修改 data 上的数据：

$ npm install @antv/graphin-components —save

Graphin-components 基于 antd 组件，因此如果是非 antd 项目，需要手动引入 antd 的 css

import React from 'react';
import ReactDOM from 'react-dom';
import Graphin, { Utils } from '@antv/graphin';
import { Toolbar } from '@antv/graphin-components';
import "@antv/graphin/dist/index.css"; // Graphin CSS
import "@antv/graphin-components/dist/index.css"; // Graphin 组件 CSS
import './styles.css';
const App = () => {
    const data = Utils.mock(10).circle().graphin();
    return (
        <div className="App">
            <Graphin data={data} layout={{ name: 'concentric' }}>
                <Toolbar />
            </Graphin>
        </div>
    );
};
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

const App = () => {
    const data = Utils.mock(10).graphin();
    const graphRef = React.createRef(null);
    React.useEffect(() => {
        const { graph } = graphRef.current;
        graph.on('node:click', e => {
            console.log('node:click', e);
        });
    }, []);
    return (
        <div className="App">
            <Graphin data={data} layout={{ name: 'concentric' }} ref={graphRef}>
                <Toolbar />
            </Graphin>
        </div>
    );
};

同一组数据，改变布局算法会产生不一样的布局效果，从而满足人们的分析需求。

interface Layout {
    name: string;
    options: {
        [key: string]: any;
    };
}
interface LayoutSelectorProps {
    / 所有的内置布局/
    layouts: Layout[];
    / 当前的布局 /
    value: Layout;
    / 切换布局的事件 /
    onChange: (vale: Layout) => void;
}
<LayoutSelector layouts={layouts} value={currentLayout} onChange={handleChange} />;

Graphin 提供两种方式获得 apis 接口，第一种是通过组件的 props 传递，即所有包裹在 Graphin 组件内部的组件，都会获得 apis 这个属性。第二种方式是通过 ref 实例，详见进阶指导/GraphRef。第一种适用于用户自定义组件，非常方便拿到需要的接口。第二种方式更加灵活，可以在 Graphin 外层使用 Graphin 所提供的信息，常用于复杂场景或者多画布实例的情况下。

02. 节点扩散

将一个节点扩散出它的一度，二度，多度关系，这是非常常用的一种分析手法。

「节点扩散」在图分析中是一个比较典型的功能。常规情况下，在画布中进行节点操作，比如添加节点，删除节点，我们都会考虑很多问题，比如从 1 个节点变为 10 个节点，画布如何变化呢？新增的 9 个节点会放在什么位置呢？使用 Graphin 时，我们就不需要考虑这么多，只需要记住它是数据驱动的，我们不需要关心具体的实现，只需要告诉 Graphin 你需要渲染的数据是什么就可以。增加节点不用使用 graph.add(node)，删除节点也不用调用 graph.remove(node)，一切都是改变数据 props.data 即可。

步骤：

• • 对选中的节点进行数据 Mock，模拟出节点扩散的结果（实际应用中这可能是从服务端返回的数据）。
• • Click 事件触发改变 state.data 即可。

import React from 'react';
import ReactDOM from 'react-dom';
import Graphin, { Utils } from '@antv/graphin';
import { Toolbar } from '@antv/graphin-components';
const App = () => {
    const [state, setState] = React.useState({
        selected: [],
        data: Utils.mock(10).graphin(),
    });
    const { data, selected } = state;
    const graphRef = React.createRef(null);
    React.useEffect(() => {
        const { graph } = graphRef.current;
        const onNodeClick = e => {
            console.log('node:click', e);
            setState({
                ...state,
                selected: [e.item.get('model')],
            });
        };
        graph.on('node:click', onNodeClick);
        return () => {
            graph.off('node:click', onNodeClick);
        };
    }, [state]);
    const onExpand = () => {
        const count = Math.round(Math.random() * 40);
        const expandData = Utils.mock(count)
            .expand(startNodes)
            .graphin();
        setState({
            ...state,
            data: {
                // 还需要对Node和Edge去重，这里暂不考虑
                nodes: [...state.nodes, ...expandData.nodes],
                edges: [...state.edges, ...expandData.edges],
            },
        });
    };
    return (
        <div className="App">
            <button onClick={onExpand}>Node Expand</button>
            <Graphin data={data} layout={{ name: 'concentric' }} ref={graphRef}>
                <Toolbar />
            </Graphin>
        </div>
    );
};

完整代码如下：

03. 总结与引导

以上就是 Graphin 的快速入门指南，相信大家已经看到了 Graphin 的简单易用之处。其实关于 Graphin 的使用，还有可以有很多开脑洞的想法。比如布局和数据一起改变会发生什么？大家不妨自己试试。想要深入地了解 Graphin，可以继续阅读 核心概念 和 进阶指导 两部分的内容