互动-SVG-HMI组件

# FastWeb 互动-SVG-HMI组件

项目地址：https://github.com/marinebon/infographiqJS (opens new window)

infographiqJS是实现信息化图表展示功能的JavaScript核心组件库。通过核心组件库，可以将SVG图表与各数据表格及其他数据展示方案结合在一起，实现互动化数据交互的效果。

# 1. 下载示例

点击https://github.com/marinebon/infographiqJS/blob/main/infographiq_example.zip (opens new window)下载关联的示例，将其解压至FastWeb目录下library/js/infographiq中。

# 2. 确认参数

使用文本编辑器打开示例中的html文档。显示的内容如下：

<!DOCTYPE HTML>
<html>
	<head>
    <title>Template Infographic</title>
    <meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- load required css and javascript libraries used by infographiq functionality -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" 
      integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" 
      crossorigin="anonymous"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" 
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" 
      crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" 
      integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" 
      crossorigin="anonymous" />
	</head>
	<body>
    <!-- define bootstrap layout that will contain the infographic -->
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-9">
          <div id = "svg1"></div>
        </div>
        <div class="col-md-3">
          <ul id="toc1"></ul>
        </div>
      </div>
    </div>

  <!-- run infographiq function to link the svg with the svg_list -->
  <script src='https://marinebon.org/infographiqJS/libs/infographiq_latest/infographiq.js'></script>  
  <link rel="stylesheet" href="https://marinebon.org/infographiqJS/libs/infographiq_latest/infographiq.css"> 
  <script>
    link_svg({
      svg: "illustrator_example.svg", 
      csv: "icon_link.csv", 
      svg_id: "svg1", 
      toc_id: "toc1",
      toc_style: "accordion",
      text_toggle: "toggle_off",
      svg_filter: "illustrator_example.svg"});
  </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

通过阅读，我们可以找到当前的网页文档通过调用同目录下的svg与csv文件来实现相关的效果，故此处我们可以将svg，csv，svg_filter三处位置分别设置参数为param_svg，param_csv，param_filter。

# 3. 修改模板

# 3.1. 本地化处理

从上述内容中可以看到示例html文档使用了较多的外部链接，我们要将这些外部链接引用的内容下载下来进行本地化处理。

根据上述文档整理出以下需要下载的文件：

https://code.jquery.com/jquery-3.6.0.min.js
https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js
https://d3js.org/d3.v5.min.js
https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
https://marinebon.org/infographiqJS/libs/infographiq_latest/infographiq.js
https://marinebon.org/infographiqJS/libs/infographiq_latest/infographiq.css

1
2
3
4
5
6

由于font-aweson还需要链接其他外部库，此处请点击https://codeload.github.com/FortAwesome/Font-Awesome/zip/refs/tags/v4.7.0 (opens new window)下载字库，并将其中的除font-aweson.css外的文件解压至library/js/infographiq/fonts目录下。

将上述库文件地址都修改为本地地址，最终修改完显示如下：

<!DOCTYPE HTML>
<html>
	<head>
    <title>Template Infographic</title>
    <meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- load required css and javascript libraries used by infographiq functionality -->
    <script src="library/js/infographiq/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"></script>
    <script src="library/js/infographiq/bootstrap.min.js" 
      integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" 
      crossorigin="anonymous"></script>
    <script src="library/js/infographiq/d3.v5.min.js"></script>
    <link rel="stylesheet" href="library/js/infographiq/bootstrap.min.css" 
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" 
      crossorigin="anonymous">
    <link rel="stylesheet" href="library/js/infographiq/font-awesome.css" 
      integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" 
      crossorigin="anonymous" />
	</head>
	<body>
    <!-- define bootstrap layout that will contain the infographic -->
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-9">
          <div id = "svg1"></div>
        </div>
        <div class="col-md-3">
          <ul id="toc1"></ul>
        </div>
      </div>
    </div>

  <!-- run infographiq function to link the svg with the svg_list -->
  <script src='library/js/infographiq/infographiq.js'></script>  
  <link rel="stylesheet" href="library/js/infographiq/infographiq.css"> 
  <script>
    link_svg({
      svg: "illustrator_example.svg", 
      csv: "icon_link.csv", 
      svg_id: "svg1", 
      toc_id: "toc1",
      toc_style: "accordion",
      text_toggle: "toggle_off",
      svg_filter: "illustrator_example.svg"});
  </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

修改font-aweson.css中的@font-face部分信息，修改完成后显示如下：

@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

1
2
3
4
5
6
7

下载font保存以上文件。

# 3.2. 标记参数

根据预设，将param_svg，param_csv，param_filter分别设置于对应的参数位置中，设置完成后显示如下：

<!DOCTYPE HTML>
<html>
	<head>
    <title>Template Infographic</title>
    <meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- load required css and javascript libraries used by infographiq functionality -->
    <script src="library/js/infographiq/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"></script>
    <script src="library/js/infographiq/bootstrap.min.js" 
      integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" 
      crossorigin="anonymous"></script>
    <script src="library/js/infographiq/d3.v5.min.js"></script>
    <link rel="stylesheet" href="library/js/infographiq/bootstrap.min.css" 
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" 
      crossorigin="anonymous">
    <link rel="stylesheet" href="library/js/infographiq/font-awesome.css" 
      integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" 
      crossorigin="anonymous" />
	</head>
	<body>
    <!-- define bootstrap layout that will contain the infographic -->
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-9">
          <div id = "svg1"></div>
        </div>
        <div class="col-md-3">
          <ul id="toc1"></ul>
        </div>
      </div>
    </div>

  <!-- run infographiq function to link the svg with the svg_list -->
  <script src='library/js/infographiq/infographiq.js'></script>  
  <link rel="stylesheet" href="library/js/infographiq/infographiq.css"> 
  <script>
    link_svg({
      svg: "param_svg", 
      csv: "param_csv", 
      svg_id: "svg1", 
      toc_id: "toc1",
      toc_style: "accordion",
      text_toggle: "toggle_off",
      svg_filter: "param_filter"});
  </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

至此，模板内容已设置完成，可进入JQueryFrame组件管理界面，将上述内容填写入模板中。

# 3.3. 设置参数

在参数界面中，设置上述参数，分别为其设置默认值：

# 3.4. 与数据库字段联动

此示例无需与数据库字段联动。此部分请留空设置。

# 4. 设置文件

根据上述方式与默认的设置已经可以导入至TUgJQueryFrame中查看演示。如果需要自定义csv与svg等文件，我们可以按照下述方式进行设置。

# 4.1. 创建SVG文件的要求

可以使用Adobe Illustrator、Inkspace(免费)等程序来编辑或查看矢量图形文件。下面以Inkspace为例介绍如何进行设置。

我们可以使用Inkspace打开infographiq中的示例文件inkscape_example.svg

点击[图层]-[图层]，打开图层界面，可以看到以下内容：

以上是在infographiq中使用的SVG图像所需要的图层结构。

# 4.1.1. 文本图层(text)

此图层用于在SVG中显示相关附加的文本或图形信息，可选是否需要此图层，如果需要此图层的，则其图层名称必须为小写的text。其中的元素必须是基于矢量的。

# 4.1.2. 图标图层(icons)

此图层是必须存在的，图标图层包含了所有可以点击的元素。此图层的名称可以命名为除text与点击的元素对象的名称外的其他任意名称，以示例的图层为例，点击icons图层左侧的三角形，可以看到其包含了六个子图层，这些子图层中每个均定义了可以点击的组件。

这些子图层的名称不应包含空格、逗号或者text。
子图层中的所有元素均应基于矢量而不是基于光栅。
没有其他元素重叠于要点击的组件的上层。
每个子层都包含单个可点击图标的所有元素。

# 4.1.3. 背景层(background_elements)

背景层是一个可选层，包含了图像的所有非响应元素，这个层的名称也可以是任何除了text或者可点击元素的名称。

# 4.1.4. 编辑图层XML

为了使svg图像可以在infographiq中正常运行，需要在Inkspace中设置面板[图层]-[图层]与[编辑]-[XML编辑器]。

对于每一个图层，请按照以下方式设置：

单击 XML 编辑器中的图层的关联条目。
修改图层的id以匹配图层的名称。
在XML编辑器中选择text图层，在下侧的框中，选择display: inline左侧红色的×以删除此行（在示例文件inkscape_example.svg中，display:inline这一行已经被删除了。）

# 4.2. 链接表(CSV)

# 4.2.1. 表结构

链接的表格通常包含以下要求：

表格的第一行必须是列标题。
该表必须是以.csv格式保存，其中的值以逗号,进行分隔。
列的顺序无关紧要，可随意进行排序。
每行的内容分别代表SVG中一个可点击的图标元素。
列中唯一需要的是icon，用于指定链接的图标元素，其他的列均为可选项。

# 4.2.2. 表格列中的字段说明

icon(必须)：图像中要被点击的图层的名称，名称必须是完全匹配的，在本节的示例中，使用到的名称分别是：
- chartexample1
- chartexample2
- chartexample3
- chartexample4
- chartexample5
- chartexample6

以上分别对应为每个图层的id与名称。

svg(可选)：用于表示所对应的svg文件名称。
title(可选)：当鼠标悬停在可点击的元素上时显示在图像上的文本。如果没有此列，则icon栏中给出的名称将会显示在图像上。请将标题设置尽量少的字数，因为过长的标题会导致显示出现不可预料的问题。
section(可选)：一种按类别分隔可点击元素的方法。
not_mordal(可选)：一种直接链接到外部 HTML 资源的方法，而不是将其作为模式窗口加载到图像上方。此列中允许使用两个值：
- T：直接链接到外部 HTML 资源，基于link列（不是模式窗口）中的值。
- F：外部 HTML 文件在 Infographiq图像上方打开，基于link列（模式窗口）中的值。

← 3D平移实景-室外浏览浏览-照片-显示组件→