npm 包 ols-graphview 使用教程

简介

ols-graphview 是一款基于 d3.js 和 React 的 npm 包，为业务提供了一些基础的数据可视化展现方式。它可以很方便地将一些类树形结构、关系网络等数据在页面上展现出来，提升用户对数据的理解度和思考效率。本文将介绍这个包的使用方法和一些注意事项。

安装

前往 npm 上安装：

--- ------- ------------- ------

使用

引用

在需要使用的文件中，使用 import 进行引用：

------ ------------ ---- ----------------

绘制

可以通过以下两种方式进行图形展示：

  1. 传递数据，使用 GraphView 组件进行渲染
----- ---- - -
  ------- ----
  --------- -
    --------- ------
    --------- -
      -
        ------- ----
        --------- -
          --------- ------
          --------- -
            -
              ------- ----
              --------- -
                --------- -----
              -
            -
          -
        -
      -
    -
  -
--

----------------------- ----------- ---
  1. 在一个 div 中指定 id，使用 Graph 组件进行渲染
----- ---- - -
  ------- ----
  --------- -
    --------- ------
    --------- -
      -
        ------- ----
        --------- -
          --------- ------
          --------- -
            -
              ------- ----
              --------- -
                --------- -----
              -
            -
          -
        -
      -
    -
  -
--

------------------- -------------- ----------- ---

--- -------------------------------
  ---------- --------
---

以上两种方式可以任选其一，不过我建议使用第二种方式，第一种方式在数据量比较大的时候会导致渲染性能上的问题。

配置项

GraphView 和 Graph 组件都可以使用一些配置项进行相应的设置。

-- ----- ---
-
  -- --- ----- --- --
  -------- -------

  -- --------
  ---------- --------

  -- -------- - ------
  --------------- -------

  -- ---- ----
  ----------- ---------

  -- ---- ------
  ----------------- ---------
-

-- --------- ---
-
  -- --------- ----
  ---------- -------

  -- ----- ----
  ------ -
    -- ------
    ----------- --------

    -- ---------- ----
    ---------- --------

    -- ------------ ------------- -------- ---
    ----------- ---------- ------- -- ---------

    -- ------------ ---------------
    ---------- ---------- ------- -- -------

    -- ------------ ---------------
    ----------- ---------- ------- -- -------

    -- ------------ ------------- -------- ---
    ----------- ---------- ------- -- ---------

    -- -------------------------------
    -------- -------

    -- -------- ----------------
    --------------------- -------

    -- --------------------------- ----------------
    ------------- - -- ------- -- ------ --
    ------- -------
    ----------- - -- ------- -- ------ --
  --
-

示例

HelloWorld

------ ----- ---- --------
------ ------------ ---- ----------------

----- ---- - -
  ------- ----
  --------- -
    --------- ------
    --------- -
      -
        ------- ----
        --------- -
          --------- ------
          --------- -
            -
              ------- ----
              --------- -
                --------- -----
              -
            -
          -
        -
      -
    -
  -
--

----- ---------- - -- -- -
  ------ -
    ------------------- -------------- ----------- --
  --
--

--- -------------------------------
  ---------- --------
---

------ ------- -----------

ConfigExample

------ ----- ---- --------
------ ------------ ---- ----------------

----- ---- - -
  ------- ----
  --------- -
    --------- ------
    --------- -
      -
        ------- ----
        --------- -
          --------- ------
          --------- -
            -
              ------- ----
              --------- -
                --------- -----
              -
            -
          -
        -
      -
    -
  -
--

----- ------------- - -- -- -
  ----- ----------- - -
    ------------ - -- ---- -- --- --
    ------ ----
    ---------- - -- --- -- - --
    ------- ------------
    ---------- ---------- -- -
      ------ -------------------------------------
    --
    --------- -- -- ------------------------ - ----
    ---------- -- -- ----------------------------------
    ---------- -- -- ------------------------ - --
  --

  ------ -
    ------------------- -------------- ----------- --
  --
--

--- -------------------------------
  ---------- ---------
  ------ -
    --------------
  -
---

------ ------- --------------

DragExample

------ ----- ---- --------
------ ------------ ---- ----------------

----- ---- - -
  ------- ----
  --------- -
    --------- ------
    --------- -
      -
        ------- ----
        --------- -
          --------- ------
          --------- -
            -
              ------- ----
              --------- -
                --------- -----
              -
            -
          -
        -
      -
    -
  -
--

----- ----------- - -- -- -
  ----- ----------- - -
    ---------- -----
    --------- ----
  --

  ------ -
    ------------------- -------------- ----------- --
  --
--

--- -------------------------------
  ---------- ---------
  ------ -
    --------------
  -
---

------ ------- ------------

ClickExample

------ ----- ---- --------
------ ------------ ---- ----------------

----- ---- - -
  ------- ----
  --------- -
    --------- ------
    --------- -
      -
        ------- ----
        --------- -
          --------- ------
          --------- -
            -
              ------- ----
              --------- -
                --------- -----
              -
            -
          -
        -
      -
    -
  -
--

----- ------------ - -- -- -
  ----- --------------- - ---------- -- -
    ----------------------
  --

  ----- ----------- - -
    ---------- ---------------
  --

  ------ -
    ------------------- -------------- ----------- --
  --
--

--- -------------------------------
  ---------- ---------
  ------ -
    --------------
  -
---

------ ------- -------------

结语

使用 ols-graphview 可以很方便地实现各种数据可视化，它有丰富的配置项，可以完全控制图形的展现形式，比如颜色、线段宽度等等。建议使用 Graph 组件，因为在数据量大的情况下，使用 GraphView 会存在性能问题。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066faf3d1de16d83a6731b

阅读全文

猜你喜欢

  • npm 包 redux-signal 使用教程

    简介 redux-signal 是一个用于 Redux 状态管理框架的中间件。它允许开发者在应用程序中使用信号（类似事件）来触发指定的逻辑，增强了代码的可读性和可维护性。

    4 年前
  • npm 包 redux-signals 使用教程

    简介 redux-signals 是一个帮助前端项目进行信号管理的 npm 包，能够快速方便地实现 Redux 中的信号处理。它通过将 redux 中的 dispatch 方法包装成一个函数，提供了更...

    4 年前
  • npm 包 redux-simple-actions 使用教程

    简介 redux-simple-actions 是一个简单易用的 npm 包，用于在 Redux 中定义和管理 action。它可以帮助前端开发者更简洁地编写 Redux 代码，减少冗余和重复的代码。

    4 年前
  • npm 包 reduce-right-async 使用教程

    介绍 reduce-right-async 是一个能够以异步方式执行 JavaScript 中 Array.prototype.reduceRight() 方法的 npm 包。

    4 年前
  • npm 包 reduce-stream-to-promise 使用教程

    在 Node.js 中，Stream 是同步处理大量数据的一种方式。但是在某些情况下，需要将多个 Stream 数据流合并处理，这时候我们可以使用 reduce-stream-to-promise。

    4 年前
  • npm 包 redux-shuttle 使用教程

    在前端开发中，redux 是一个很常用的状态管理工具。redux-shuttle 是一个可用于在 redux 中修改嵌套状态的 npm 包。它是一个具有简单 API 的函数式工具，适用于修改复杂的嵌套...

    4 年前
  • npm 包 redux-devtools-bubbles-monitor 使用教程

    简介 redux-devtools-bubbles-monitor 是一个基于 Redux DevTools 的监控组件，它可以让你更加直观地观察你的 Redux 状态变化及其历史记录。

    4 年前
  • npm 包 redux-side-effect 使用教程

    作为前端开发者，我们经常需要管理应用程序中的状态。Redux 是一个流行的状态管理库，它提供了一个可预测的状态管理解决方案。但是，Redux 的工作方式需要我们编写大量的模板代码，并且无法处理副作用（...

    4 年前
  • npm 包 redux-side-effects 使用教程

    在前端开发中，状态管理是一项非常重要的任务。Redux 是一个非常出色的状态管理库，能够帮助我们更好地组织和管理应用程序的状态。但是，Redux 还不是完美的，因为它没有能够处理副作用的能力。

    4 年前
  • npm 包 redux-devtools-chart-monitor-immutable-fix 使用教程

    前言 在前端开发中，状态管理是一个至关重要的部分。redux-devtools-chart-monitor-immutable-fix 是一个 npm 包，可以帮助我们更好地监控和管理状态。

    4 年前
  • npm包redux-devtools-clipboard使用教程

    前言 在开发过程中，我们会经常需要利用redux-devtools来调试redux应用的状态。redux-devtools可以让我们清晰地了解应用整体的状态，并可以修改状态并回放state的变化。

    4 年前
  • npm 包 reduce-to 使用教程

    在前端开发中，reduce 方法是非常常用的一个数组方法，它接受一个函数作为参数，这个函数会被数组中的每一个元素调用，最终返回一个累加器。 在实际开发中，我们会遇到许多类似的累加逻辑，而 reduce...

    4 年前
  • npm 包 reduce-web-component 使用教程

    简介 reduce-web-component 是一个开源的 npm 包，它可以将传统的 Web 页面转化为组件化的架构，实现页面复用和可维护性的提高。本教程将介绍如何使用该 npm 包。

    4 年前
  • npm 包 reduce-umls-terms 使用教程

    在前端开发中，优化项目结构和代码质量是开发者必须要面临的问题之一。尤其是在涉及海量数据处理时，使用合适的工具可以大大提高开发效率。npm 是前端开发中常用的包管理器，reduce-umls-terms...

    4 年前
  • npm 包 redux-devtools-chart-monitor-15 使用教程

    在前端开发中，Redux 是一个非常流行的状态管理工具。而 redux-devtools-chart-monitor-15 是一个用于 Redux 的图表监视器插件，它可以帮助我们更好地理解 Redu...

    4 年前
  • npm 包 redux-devtools-chart-monitor-immutable 使用教程

    介绍 redux-devtools-chart-monitor-immutable 是一个 redux 开发者工具包中的可视化工具，它用于在开发过程中可视化地检测 Redux store 中的状态变化...

    4 年前
  • npm 包 redux-minifetch 使用教程

    redux-minifetch 是一个基于 redux 和 fetch 的轻量级网络请求库，用于在前端开发中进行数据获取和处理。在本篇文章中，我们将深入介绍如何使用 redux-minifetch 进...

    4 年前
  • npm 包 reduced-actions-redux 使用教程

    什么是 reduced-actions-redux reduced-actions-redux 是一个基于 Redux 的状态管理工具，它可以让你更容易地在 Redux 中使用 action。

    4 年前
  • NPM 包 reduceless 使用教程

    介绍 Reduceless 是一个轻量级的 LESS 函数库，它封装了许多有用的方法供开发人员使用。该库支持 LESS 版本 3.0 及以上，并运行于 Node.js 环境。

    4 年前
  • npm 包 redux-devtools-deku-slider-monitor 使用教程

    redux-devtools-deku-slider-monitor 是一个基于 react 和 redux 的调试工具包，能够帮助前端开发者更好地调试应用程序的状态。

    4 年前

相关推荐

    暂无文章