npm 包 fdp 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

fdp 是一个基于 d3.js 的可视化工具，可用于绘制流程图、状态机等。它提供了丰富的 API，以及易于扩展的插件机制。在本文中，我们将介绍如何使用 fdp 打造出美观实用的可视化图表。

安装

fdp 是一款 npm 包，可以通过以下命令进行安装：

npm install fdp

快速入门

以下代码展示了如何使用 fdp 绘制一个简单的流程图：

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

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

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

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

上面的代码先定义一个包含节点和边的数据对象 data，然后利用 flow 函数创建一个流程图实例，并将其渲染到指定的容器上。

这里我们使用了 d3.js 提供的布局算法来计算节点的位置，因此不需要手动指定节点的坐标。如果需要手动指定节点坐标，可以设置 fixed: true 属性，如下所示：

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

节点样式

可以通过 nodeStyle 方法设置节点的样式，如下所示：

flow(container)
  .nodeStyle(node => {
    return {
      fill: node.isSelected ? '#ff0' : '#fff',
      stroke: '#000'
    };
  });

上面的示例中，nodeStyle 回调函数返回一个包含 fill 和 stroke 属性的对象。其中，isSelected 属性可以通过 getNodeById 方法获取指定节点的选择状态，如下所示：

const node = flow.getNodeById('A');
node.isSelected = true;

边样式

fdp 提供了多种边的绘制方式，可以通过 linkShape 方法指定。以下展示了一些可选的边绘制方式：

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

上面的代码分别展示了直线、折线和曲线三种方式。需要注意的是，在绘制折线和曲线时，需要对边的起点和终点进行特殊的处理。

可以通过 linkStyle 方法设置边的样式，如下所示：

flow(container)
  .linkStyle(link => {
    return {
      stroke: link.highlight ? '#ff0' : '#000'
    };
  });

上面的示例中，linkStyle 回调函数返回一个包含 stroke 属性的对象。其中，highlight 属性可以通过 getEdgeBySourceAndTarget 方法获取指定边的高亮状态，如下所示：

const edge = flow.getEdgeBySourceAndTarget('A', 'B');
edge.highlight = true;

事件交互

可以通过 on 方法监听节点和边的鼠标事件，如下所示：

flow(container)
  .on('node.click', node => {
    console.log(`click node: ${node.id}`);
  })
  .on('link.mouseover', link => {
    console.log(`mouseover link: ${link.source.id} -> ${link.target.id}`);
  });

上面的示例中，on 方法接收两个参数，第一个参数表示要监听的事件类型，第二个参数是事件回调函数。可以监听的事件类型包括：

node.click: 节点点击事件
node.dblclick: 节点双击事件
node.mouseover: 节点鼠标移入事件
node.mouseout: 节点鼠标移出事件
link.click: 边点击事件
link.dblclick: 边双击事件
link.mouseover: 边鼠标移入事件
link.mouseout: 边鼠标移出事件

扩展插件

fdp 提供了扩展插件机制，可以通过 use 方法加载插件，如下所示：

import { flow } from 'fdp';
import fdpCurvedLink from 'fdp-plugin-curved-link';

flow(container)
  .use(fdpCurvedLink)
  .render();

上面的代码加载了 fdp-plugin-curved-link 插件，用于绘制曲线边。使用插件后，不需要再手动指定边的绘制方式。

总结

本文介绍了如何使用 fdp 去绘制流程图、状态机等可视化图表。你可以通过设置节点和边的样式、监听鼠标事件等方式，打造出美观实用的图表。此外，fdp 还提供了扩展插件机制，方便你快速搭建自己需要的可视化场景。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600562c881e8991b448e0091