简介
ols-graphview 是一款基于 d3.js 和 React 的 npm 包，为业务提供了一些基础的数据可视化展现方式。它可以很方便地将一些类树形结构、关系网络等数据在页面上展现出来，提升用户对数据的理解度和思考效率。本文将介绍这个包的使用方法和一些注意事项。
安装
前往 npm 上安装：
npm install ols-graphview --save
使用
引用
在需要使用的文件中，使用 import 进行引用：
import OlsGraphview from 'ols-graphview';
绘制
可以通过以下两种方式进行图形展示：
- 传递数据，使用 GraphView 组件进行渲染
-- -------------------- ---- -------
----- ---- - -
------- ----
--------- -
--------- ------
--------- -
-
------- ----
--------- -
--------- ------
--------- -
-
--- ------- ----
--- --------- -
------------- -----
--- -
-
-
-
-
-
-
--
----------------------- ----------- ---- 在一个 div 中指定 id，使用 Graph 组件进行渲染
-- -------------------- ---- -------
----- ---- - -
------- ----
--------- -
--------- ------
--------- -
-
------- ----
--------- -
--------- ------
--------- -
-
--- ------- ----
--- --------- -
------------- -----
--- -
-
-
-
-
-
-
--
------------------- -------------- ----------- ---
--- -------------------------------
---------- --------
---以上两种方式可以任选其一，不过我建议使用第二种方式，第一种方式在数据量比较大的时候会导致渲染性能上的问题。
配置项
GraphView 和 Graph 组件都可以使用一些配置项进行相应的设置。
-- -------------------- ---- -------
-- ----- ---
-
-- --- ----- --- --
-------- -------
-- --------
---------- --------
-- -------- - ------
--------------- -------
-- ---- ----
----------- ---------
-- ---- ------
----------------- ---------
-
-- --------- ---
-
-- --------- ----
---------- -------
-- ----- ----
------ -
--- ------
----------- --------
--- ---------- ----
---------- --------
--- ------------ ------------- -------- ---
----------- ---------- ------- -- ---------
-- ------------ ---------------
---------- ---------- ------- -- -------
-- ------------ ---------------
----------- ---------- ------- -- -------
-- ------------ ------------- -------- ---
----------- ---------- ------- -- ---------
-- -------------------------------
-------- -------
-- -------- ----------------
--------------------- -------
-- --------------------------- ----------------
------------- - -- ------- -- ------ --
------- -------
----------- - -- ------- -- ------ --
--
-示例
HelloWorld
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- ----------------
----- ---- - -
------- ----
--------- -
--------- ------
--------- -
-
------- ----
--------- -
--------- ------
--------- -
-
--- ------- ----
--- --------- -
------------- -----
--- -
-
-
-
-
-
-
--
----- ---------- - -- -- -
------ -
------------------- -------------- ----------- --
--
--
--- -------------------------------
---------- --------
---
------ ------- -----------ConfigExample
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- ----------------
----- ---- - -
------- ----
--------- -
--------- ------
--------- -
-
------- ----
--------- -
--------- ------
--------- -
-
--- ------- ----
--- --------- -
------------- -----
--- -
-
-
-
-
-
-
--
----- ------------- - -- -- -
----- ----------- - -
------------ - -- ---- -- --- --
------ ----
---------- - -- --- -- - --
------- ------------
---------- ---------- -- -
------ -------------------------------------
--
--------- -- -- ------------------------ - ----
---------- -- -- ----------------------------------
---------- -- -- ------------------------ - --
--
------ -
------------------- -------------- ----------- --
--
--
--- -------------------------------
---------- ---------
------ -
--------------
-
---
------ ------- --------------DragExample
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- ----------------
----- ---- - -
------- ----
--------- -
--------- ------
--------- -
-
------- ----
--------- -
--------- ------
--------- -
-
--- ------- ----
--- --------- -
------------- -----
--- -
-
-
-
-
-
-
--
----- ----------- - -- -- -
----- ----------- - -
---------- -----
--------- ----
--
------ -
------------------- -------------- ----------- --
--
--
--- -------------------------------
---------- ---------
------ -
--------------
-
---
------ ------- ------------ClickExample
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- ----------------
----- ---- - -
------- ----
--------- -
--------- ------
--------- -
-
------- ----
--------- -
--------- ------
--------- -
-
--- ------- ----
--- --------- -
------------- -----
--- -
-
-
-
-
-
-
--
----- ------------ - -- -- -
----- --------------- - ---------- -- -
----------------------
--
----- ----------- - -
---------- ---------------
--
------ -
------------------- -------------- ----------- --
--
--
--- -------------------------------
---------- ---------
------ -
--------------
-
---
------ ------- -------------结语
使用 ols-graphview 可以很方便地实现各种数据可视化，它有丰富的配置项，可以完全控制图形的展现形式，比如颜色、线段宽度等等。建议使用 Graph 组件，因为在数据量大的情况下，使用 GraphView 会存在性能问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066faf3d1de16d83a6731b