npm 包 fhir-graph 使用教程

FHIR（Fast Healthcare Interoperability Resources）是由HL7国际组织制定的医疗健康领域的数据规范，旨在促进医疗健康数据的交互和共享。而fhir-graph是一个基于FHIR资源的可视化工具。

本篇文章将为大家介绍如何使用npm包fhir-graph，并通过实际示例展示如何解析和呈现FHIR资源数据。

安装

首先，我们需要在项目中安装fhir-graph，可以通过以下命令来完成：

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

使用

初始化

使用fhir-graph前，我们需要在项目中引入fhir-graph依赖。

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

解析FHIR资源数据

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

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

----- ------ - -----------------------------------------
  • fhirGraph.parseResource()参数是FHIR资源对象，返回值是基于FHIR资源的节点信息、连线信息以及呈现节点信息所需的配置信息。

呈现图形

----- ------- - -
  ------ -
    -------- -----
    ------ ---------
  --
  ------ -
    ----------- -
      --- -----
      ------ -------
    --
    ------ -
      ----- -------
      ------- --------
      ------------ -
    -
  --
  ------ -
    ----------- -
      ------- ---------
      ------- ---------
      ------ -------
    --
    ------ -
      ----- -------
      ------- --------
      ---------------- ---
      -------------- --------
      ------------ -
    -
  -
--
  • 基于解析FHIR资源数据的结果，我们可以呈现一个连线图，在呈现图形之前我们需要进行一些配置。
  • graph配置用于配置图形布局信息和标签，nodes配置用于配置节点属性和样式，links配置用于配置连线属性和样式。
----- ---- - -
  ------ -
    -
      --- -----------
      ------ ----------
      ----------- ----------
    --
    -
      --- --------
      ------ -------
      ----------- -----------
      ----- ------
    -
  --
  ------ -
    -
      ------- -----------
      ------- --------
      ------ ------
    -
  -
--

----- ---------- - ---------------------- ---------
  • 调用fhirGraph.render()方法可以呈现一个基于节点信息、连线信息以及配置的图形，并返回一个svg元素。

示例

下面是一个完整的示例。

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

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

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

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

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

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

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

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

运行此示例，控制台输出以下svg元素信息：

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

这个svg元素将表示以下的图形：

通过这个示例，我们可以简单地了解如何使用npm包fhir-graph来解析和呈现FHIR资源数据。

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

阅读全文

猜你喜欢

  • npm 包 array-table 使用教程

    Array-table 是一个可以方便地将数组转换为 HTML 表格的 npm 包。它提供了简单易用的 API，支持排序、筛选等功能，非常适合用于前端开发的数据展示，比如数据分析、报表等场景。

    3 年前
  • npm 包 is-substring 使用教程

    在前端开发中，字符串的操作是不可避免的。而在字符串操作中，经常需要判断一个字符串是否是另一个字符串的子串。在 JavaScript 中，我们常常使用 indexOf 方法来判断一个字符串是否包含另一个...

    3 年前
  • npm 包 @mojule/vfs 使用教程

    前言 随着 Web 应用的发展，前端工程师越来越需要面对代码复杂度和维护性的挑战。虽然现在有很多优秀的框架和工具来帮助我们提高开发效率和代码质量，但是我们还需要深入了解一些基础的知识，以便更好地理解和...

    3 年前
  • npm包raml-mocker-bblp使用教程

    在前端开发过程中，我们经常需要定义一些接口数据，使用 ramble 格式的 API 描述文件可以方便地定义接口数据和 API文档。而 raml-mocker-bblp 是一个 npm 包，可以快速生成...

    3 年前
  • npm 包 react-mailchimp-subscribe-scrantonhacks 使用教程

    前言 随着互联网和移动互联网的发展，邮件营销已经成为了企业进行推广和转化的重要手段。而在邮件营销中，MailChimp 是一个十分流行的邮件营销软件，可以帮助企业快速构建邮件列表、创建邮件模板、发送批...

    3 年前
  • npm 包 fabric8-runtime-console 使用教程

    前言 Fabric8 Runtime Console 是一个开源的 Web 应用程序，用于管理 Kubernetes 上的微服务和应用程序。它允许用户创建、部署和管理容器化的应用程序，同时提供了可视化...

    3 年前
  • npm 包 @bb-cli/dgeni-packages 使用教程

    前言 在前端开发过程中，我们经常会使用到各种工具和框架来提升开发效率。其中，npm 包是我们经常用到的一种工具，它可以帮助我们管理依赖、发布和使用代码库等等。今天，我们要介绍的是一款名为 @bb-cl...

    3 年前
  • npm 包 @mae/customer_connect_cid 使用教程

    简介 @mae/customer_connect_cid 是一款npm包，它可以将客户与CID（Customer Identification Number）相关联，方便进行数据追踪和分析。

    3 年前
  • npm 包 ygit 使用教程

    在现代的前端工程化开发中，使用 Git 已经成为了必不可少的一步。Git 能够使得我们的代码版本控制更加方便和高效。但是在一些情况下，我们可能需要在项目中使用多个 Git 账号进行代码管理。

    3 年前
  • npm 包 bianjie-block 使用教程

    前言 在前端开发中，我们经常需要使用到各种不同的 npm 包以及组件库。今天我们要介绍的是社区中比较流行的一个 npm 包：bianjie-block。 bianjie-block 是一款以区块为基础...

    3 年前
  • npm 包 bootstrap-select-ajax 使用教程

    在前端开发中，使用 Bootstrap 和 ajax 是很常见的技术，而 bootstrap-select-ajax 这个 npm 包可以帮助我们更便捷地将两者结合起来，以实现更好的用户体验。

    3 年前
  • npm 包 dmak 使用教程

    在前端开发中，npm 包是不可或缺的一部分。npm（Node Package Manager）是一个包管理工具，用于帮助前端开发者在项目中引入诸如 jQuery 和 React 之类的依赖库。

    3 年前
  • npm 包 ellipses 使用教程

    在前端开发中，经常会遇到需要在页面元素中限制文字的长度并加上省略号的情况，这时候我们就可以使用 npm 包 ellipses 来解决问题。本篇文章将介绍 ellipses 的基本使用方法以及一些高级用...

    3 年前
  • npm 包 gvnn-postgraphql 使用教程

    什么是 gvnn-postgraphql？ gvnn-postgraphql 是一个 npm 包，它允许你将你的 Postgres 数据库通过 GraphQL API 进行访问。

    3 年前
  • npm 包 pino-eventhub 使用教程

    前言 在现代前端应用中，前端日志记录是非常重要的一项工作，它可以帮助我们更好地监控应用的运行状态，及时发现并解决问题。而 pino 是一个快速、低开销的 Node.js 日志记录库，pino-even...

    3 年前
  • npm 包 multi-select-react 使用教程

    在前端开发中，我们经常需要使用下拉菜单或多选框来让用户选择多个选项。像这样的组件，在 React 中有许多开源的解决方案，其中 multi-select-react 是一款不错的 npm 包。

    3 年前
  • npm 包 ngx-bootstrap-base 使用教程

    前端开发中经常会使用到一些插件或库，为了提高开发效率，我们可以使用 npm 包管理工具来管理这些插件或库。ngx-bootstrap-base 是一个基于 Bootstrap 的 Angular 组件...

    3 年前
  • npm 包 react-native-checkout-mercadopago2 使用教程

    前言 React Native 是一个非常流行的跨平台移动应用程序开发框架。它使用 JavaScript 语言，可以快速构建高质量的移动应用程序。而 npm 则是一个非常强大、广泛地应用于前端工程的包...

    3 年前
  • npm 包 weex-eros-template 使用教程

    weex-eros-template 是一款基于 Weex 和 Eros 的移动端框架，它可以帮助开发者快速搭建基于 Weex 和 Eros 的应用。本教程将详细介绍如何使用 weex-eros-te...

    3 年前
  • npm 包 hyperapp-dot-notation-reducer 使用教程

    前言 在前端开发中，我们经常需要处理 state 的变化，有时候需要对 state 中的某个属性进行修改。hyperapp-dot-notation-reducer 就是一个帮助我们快速修改 stat...

    3 年前

相关推荐

    暂无文章