mtdv logo

入门教程

阅读时间约 4 分钟

安装

图谱可视化 force-graph-vis 支持 npm 和 CDN 两种引入方式，同时提供 UMD 和 ESM 两种模块化构建包

npm

仓库地址

npm install @snfe/force-graph-vis

在代码中引入

import '@snfe/force-graph-vis/dist/style/force-graph-vis.css';
import '@snfe/force-graph-vis/dist/style/plugin-bezier-curve-controller.css';
import ForceGraphVis from '@snfe/force-graph-vis';

CDN

UMD

<!-- CDN -->
<link rel="stylesheet"
      href="https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/force-graph-vis/latest/style/force-graph-vis.css" />
<link rel="stylesheet"
      href="https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/force-graph-vis/latest/style/plugin-bezier-curve-controller.css" />
<script src="https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/force-graph-vis/latest/force-graph-vis.min.js"></script>

<script>
new ForceGraphVis.default({
    /* options */
});
</script>

在浏览器环境中使用 ESModule

ESM 了解更多

<link rel="stylesheet"
      href="https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/force-graph-vis/latest/style/force-graph-vis.css" />
<link rel="stylesheet"
      href="https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/force-graph-vis/latest/style/plugin-bezier-curve-controller.css" />
<script type="module">
import ForceGraphVis
    from 'https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/force-graph-vis/latest/force-graph-vis.esm.min.js';
</script>

D3 环境依赖

CDN

<!-- d3官方 -->
<script src="https://d3js.org/d3.v7.min.js"></script><!-- CDN -->
<script src="https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/d3/d3-v7.0.0.min.js"></script><!-- 非压缩包 -->
<script src="https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/d3/d3-v7.0.0.js"></script><!-- 其他版本 -->
<script src="https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/d3/d3-v6.7.0.js"></script>
<script src="https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/d3/d3-v6.5.0.js"></script>
<script src="https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/d3/d3-v5.9.2.js"></script>
<script src="https://s3plus.sankuai.com/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/d3/d3-v4.13.0.js"></script>

npm

npm install d3
  • npm install @types/d3 -D 可选
  • 将 d3 通过 options 传入 force-graph-vis
import * as d3 from 'd3';
import ForceGraphVis from '@snfe/force-graph-vis';

new ForceGraphVis({
    d3: d3,
    /* options */
});
  • 或者将 d3 挂载到 window
import * as d3 from 'd3';

window.d3 = d3;
import ForceGraphVis from '@snfe/force-graph-vis';

new ForceGraphVis({
    /* options */
});

快速上手

数据

定义一些节点和边，节点包含 id 属性，边包含 source 和 target 属性，分别对应边起始节点的 id 和指向节点的 id

const graphData = {
    nodes: [{ id: 'Myriel' }, { id: 'Napoleon' }],
    links: [{ source: 'Myriel', target: 'Napoleon' }],
};

容器

创建一个容器元素，并定义它的初始高度

<div id="graphWrap" style="height: 100px"></div>

初始化

实例化 ForceGraphVis，将容器元素和数据通过 options 传入

new ForceGraphVis({
    dom: document.getElementById('graphWrap'),
    data: graphData,
});

完结撒花

在静态页中使用

UMD

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>快速上手</title>
    <link rel="stylesheet"
          href="https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/force-graph-vis/latest/style/force-graph-vis.css" />
    <link rel="stylesheet"
          href="https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/force-graph-vis/latest/style/plugin-bezier-curve-controller.css" />
    <script src="https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/d3/d3-v7.0.0.min.js"></script>
    <script src="https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/force-graph-vis/latest/force-graph-vis.min.js"></script>
</head>
<body>
<div id="graphWrap" style="height: 100px"></div>
</body>
<script>
const graphData = {
    nodes: [{ id: 'Myriel' }, { id: 'Napoleon' }],
    links: [{ source: 'Myriel', target: 'Napoleon' }],
};
let graph = new ForceGraphVis.default({
    dom: document.getElementById('graphWrap'),
    data: graphData,
});
</script>
</html>

ESModule

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>快速上手</title>
    <link rel="stylesheet"
          href="https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/force-graph-vis/latest/style/force-graph-vis.css" />
    <link rel="stylesheet"
          href="https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/force-graph-vis/latest/style/plugin-bezier-curve-controller.css" />
    <script src="https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/d3/d3-v7.0.0.min.js"></script>
</head>
<body>
<div id="graphWrap" style="height: 100px"></div>
</body>
<script type="module">
import ForceGraphVis
    from 'https://s3plus.meituan.net/v1/mss_c9d411db85ec4b59aaebc4dfca416c55/lib/force-graph-vis/latest/force-graph-vis.esm.min.js';

const graphData = {
    nodes: [{ id: 'Myriel' }, { id: 'Napoleon' }],
    links: [{ source: 'Myriel', target: 'Napoleon' }],
};
let graph = new ForceGraphVis({
    dom: document.getElementById('graphWrap'),
    data: graphData,
});
</script>
</html>

在 Vue 中使用