FHIR（Fast Healthcare Interoperability Resources）是由HL7国际组织制定的医疗健康领域的数据规范，旨在促进医疗健康数据的交互和共享。而fhir-graph是一个基于FHIR资源的可视化工具。
本篇文章将为大家介绍如何使用npm包fhir-graph，并通过实际示例展示如何解析和呈现FHIR资源数据。
安装
首先，我们需要在项目中安装fhir-graph，可以通过以下命令来完成：
npm install fhir-graph --save
使用
初始化
使用fhir-graph前，我们需要在项目中引入fhir-graph依赖。
const { FHIRGraph } = require('fhir-graph');解析FHIR资源数据
-- -------------------- ---- -------
----- --------- - --- ------------
----- --------------- - -
------------- ----------
--- -----------
----- --
------ -
------
--
------- -----
---
------- -----
------- -------
---------- ------------
--
----- ------ - ------------------------------------------ fhirGraph.parseResource()参数是FHIR资源对象，返回值是基于FHIR资源的节点信息、连线信息以及呈现节点信息所需的配置信息。
呈现图形
-- -------------------- ---- -------
----- ------- - -
------ -
-------- -----
------ ---------
--
------ -
----------- -
--- -----
------ -------
--
------ -
----- -------
------- --------
------------ -
-
--
------ -
----------- -
------- ---------
------- ---------
------ -------
--
------ -
----- -------
------- --------
---------------- ---
-------------- --------
------------ -
-
-
--- 基于解析FHIR资源数据的结果，我们可以呈现一个连线图，在呈现图形之前我们需要进行一些配置。
- graph配置用于配置图形布局信息和标签，nodes配置用于配置节点属性和样式，links配置用于配置连线属性和样式。
-- -------------------- ---- -------
----- ---- - -
------ -
-
--- -----------
------ ----------
----------- ----------
--
-
--- --------
------ -------
----------- -----------
----- ------
-
--
------ -
-
------- -----------
------- --------
------ ------
-
-
--
----- ---------- - ---------------------- ---------- 调用fhirGraph.render()方法可以呈现一个基于节点信息、连线信息以及配置的图形，并返回一个svg元素。
示例
下面是一个完整的示例。
-- -------------------- ---- -------
----- - --------- - - ----------------------
----- --------- - --- ------------
----- --------------- - -
------------- ----------
--- -----------
----- --
------ -
------
--
------- -----
---
------- -----
------- -------
---------- ------------
--
----- ------ - -----------------------------------------
----- ------- - -
------ -
-------- -----
------ ---------
--
------ -
----------- -
--- -----
------ -------
--
------ -
----- -------
------- --------
------------ -
-
--
------ -
----------- -
------- ---------
------- ---------
------ -------
--
------ -
----- -------
------- --------
---------------- ---
-------------- --------
------------ -
-
-
--
----- ---- - -
------ -
-
--- -----------
------ ----------
----------- ----------
--
-
--- --------
------ -------
----------- -----------
----- ------
-
--
------ -
-
------- -----------
------- --------
------ ------
-
-
--
----- ---------- - ---------------------- ---------
------------------------运行此示例，控制台输出以下svg元素信息：
<svg id="fhir-graph" xmlns="http://www.w3.org/2000/svg" width="70" height="62">
<g><circle id="patient1" fill="gray" stroke="black" stroke-width="1" r="10"></circle><text x="-5" y="5" style="font-size:12px">Patient</text></g>
<g><circle id="name1" fill="gray" stroke="black" stroke-width="1" r="10"></circle><text x="-5" y="5" style="font-size:12px">Name</text></g>
<g><path d="M9.9,-2.2L0,-2.2L0,2.2000000000000006L9.9,2.2000000000000006" fill="none" stroke="black" stroke-width="1" marker-end="url(#arrowhead)" transform="translate(10,10)"></path><text x="4" y="0" style="font-size:12px">name</text></g>
<defs>
<marker id="arrowhead" viewBox="0 0 10 10" refX="10" refY="5" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z"></path></marker>
</defs>
</svg>这个svg元素将表示以下的图形：
通过这个示例，我们可以简单地了解如何使用npm包fhir-graph来解析和呈现FHIR资源数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fe681e8991b448dd88a