如何从头开始构建交互式信息图

使用普通Javascript创建交互式图表（第一部分）

交互式图表与简单的Javascript

介绍

今天的浏览器让我们以前所未有的方式连接信息。信息图表就是这样一个领域。作为象形图，它是一个出色的可视化工具。作为一个交互式网页，您只需进行一些编码即可实现新的参与度。

许多开源库渲染出奇妙的图表。我们的最爱是D3和vis.js. 但是，还有一些时候我们需要公共图书馆无法提供的功能。

目的

让我们用简单的Javascript构建一个交互式信息图。

案例分析

Google Cloud Platform（GCP）就像是Web开发人员的糖果店。它的产品类别超过了手指可以计数，并且每个互连以不同的方式解决复杂问题。

GCP“组织结构图”。官方消息来源：Google Cloud Platform

如果我们利用现代浏览器的强大功能来展示GCP产品的优势，那么UI将如何呈现？是否可以使用基本的Javascript技术来产生非凡的结果？

设计方法

我们的设计方法基于使用一致且持久的用户界面（UI）来讲述引人入胜的故事的想法。让我们重新思考两个方面的设计：

• 信息架构。我们可以将信息视为连续路径，而不是通过重复页面加载缝合的曲线拼图块吗？
• 用户界面（UI）。我们能否通过互动且一致的用户界面呈现信息？

UI概念：镜子

• 简洁。我们希望使用尽可能少的代码创建可自定义的UI。
• 简单。我们希望使用开箱即用的浏览器功能，而不是第三方库。这意味着只使用Plain Javascript。
• 可重用性。我们希望将视图与模型分开，以便更容易使我们的项目适应其他用例。

入门 - 基本构建块

让我们将节点和链接的概念作为我们设计工作流程的基本构建块。

节点是起点和终点。例如，公共汽车站可以称为节点。从一个节点到另一个节点的总线路径可以称为链路。一组相关的节点和链接可以称为一个分支。

基本构建块：每个节点描述一组唯一关系

节点元素。我们可以使用HTML元素和唯一ID来描述节点。例如，node11将是分支＃1的节点＃1。类似地，node12将是分支＃1的节点＃2。在上图中，它将是圆“1”和“2”。总线路径＃1（即分支＃1）将连接圆圈“1”和“2”以及其他圆圈（即2a，3,3a，3b）。

让我们使用该style属性来描述每个元素的独特位置，形状和行为。您可以使用任何HTML，CSS，图标或图像来表示节点或链接。我们视频中的圆形节点只是带有CSS的div标签border-radius。

<div id=”node11" style=”…”>1–1 Occupation Name</div>
<div id=”node12" style=”…”>1–2 Occupation Name</div>

链接元素。链接连接节点。例如，link1112连接node11和node12。

<div style=”...” id=”link1112"></div>

提示：使用图像叠加层来指导HTML元素的CSS定位。

抛开概念 - 互动如何在网页上运作

我们讨论过的节点和链接本质上是浏览器运行时的DOM元素。DOM或文档对象模型是一种树状数据结构，用于表示HTML元素并将内容映射到物理显示。

相反，我们也可以通过操纵DOM与任何显示元素进行交互。在我们的项目中，我们希望这些节点和链接响应特定的用户操作，例如mouseover事件。

document.addEventListener( "mouseover", myCustomFunction );

• mouseover 检测鼠标光标悬停在特定DOM文档（如按钮）上。
• 一旦检测到，它将调用myCustomFunction做某事（例如弹出动画序列或从数据库中检索信息）。

我们将使用此Javascript API来检测用户操作并触发一系列功能来创建交互式网页。

创建工作流快捷方式

让我们团结节点和链路元素，其event listeners内的loop两个步骤：

第一步。分配模型（数据）。

将HTML元素的唯一id值存储为item[]数组。

var item = [
 ‘11’,’12',’1112',
 ‘21’,’22',’2122',
 ...
 ];

item []数组中的每个值将对应于每个节点或链接的唯一id值（例如，11指代node11; 1112指代link1112。）。您可以将item []视为主注册表。

接下来设置legend[]举行an array of objects。每个对象都是一个与特定用户操作相对应的数据集。

var legend = {
 'item11' : { "node" : ['11'], "links" : [] },
 'item12' : { "node" : ['11','12'], "links" : ['1112'], },
 ...
}

• 当鼠标光标悬停时node11，该对象item11将调用node11CSS目标。
• 同样，当光标悬停node12，对象item12调用node11，node12以及link1112对CSS的定位。
• item只是一个前缀标签。使用您的命名约定。

我们花点时间考虑上述模式的含义。我们不仅创建了一个存储内容的系统，还创建了一个图形关系来描述数据连接。

我们减少了大量的代码; 加快设计工作流程; 并将视图与模型（数据）分开。让我们继续构建视图引擎。

提示：对于动态内容管理，请考虑将数据集编码为JSON并通过数据库访问它们。此外，使用任何工具编辑数据集和HTML布局。

第二步。遍历每个HTML元素以编程方式关联事件侦听器。

while (item[i]) {
   itemElement[i] = "node".concat(item[i]);
   itemElementName[i] = document.getElementById( itemElement[i] );
   itemElementName[i].addEventListener( "mouseover", mouseOver );
   itemElementName[i].addEventListener( "mouseout", mouseOut );
   ...
   i++;
}

1. while迭代注册的每个DOM元素的id值item[]。
2. “item”.concat(item[i]) 重新附加您可能拥有的任何自定义前缀（即“节点”）以匹配实际的id值。
3. itemElementName[i] = document.getElementById( item[i] ) 构建一个DOM引用数组。
4. “ mouseover”和“ mouseout”将每个DOM元素绑定到用户操作。

提示＃1：移动设备和触摸设备有自己的一组事件监听器，如*touchstart*和*touchmove*。使用它们来创建响应式设计。

提示＃2：在触摸或滚轮事件监听器上使用“被动”参数来提高浏览器性能，如下所示：

document.addEventListener('touchstart', onTouchStart, {passive: true});

使用CSS自定义交互行为

我们可以创建自定义函数mouseOver并mouseOut应用CSS效果：

function mouseOver(event) {
   for (var i in legend[this.id]["node"]) {
      var currKey = "node".concat(legend[this.id]["node"][i]);
      document.getElementById(currKey).style.background = "grey";
      ...
   }
   for (var i in legend[this.id]["link"]) {
      var currKey = "link".concat(legend[this.id]["link"][i]);
      document.getElementById(currKey).style.border = "1px solid 
      #000";
      ...
   }
}

• 使用事件侦听mouseover器将DOM元素绑定到自定义函数mouseOver。此函数接受event参数（由浏览器提供）以提供活动this.id值。
• legend[this.id][“node”] 标识用于应用CSS定位的数据集。
• *for*循环通过集合legend[]。

在我们的示例中，该mouseOver函数将目标节点的背景颜色变为灰色。

在link元素上使用相同的想法。在我们的示例中，links1112当鼠标指针悬停在node12（node11和node12也变为灰色）时，我们将颜色从灰色变为纯黑色。

接下来，只要光标退出当前DOM元素，就“重置”CSS行为（参见粗体）。

function mouseOut() {
   for (var i in legend[this.id]["node"]) {
      var currKey = "node".concat(legend[this.id]["node"][i]);
      document.getElementById(currKey).style.background = "unset";
      ...
   }
   for (var i in legend[this.id]["link"]) {
      ...
   }
}

使用SVG无限缩放

我们的GCP信息图表广泛使用SVG来支持高清分辨率的缩放功能，这将在我们讨论的下一部分中实现。

要更改HTML / CSS circle 1，或node11，成六角形状SVG，则只需将一个HTML容器内的SVG内容（见粗体）。

<div id=”node11" style=”display:flex; align-items:center;">
    <svg>
        <path d="...some paths"/>
    </svg>
    <div style="align-items:center; width:100%;">
        My Text Label
    </div>
</div>

• id=”node11"引用相同的节点。它现在包含SVG数据，而不是呈现HTML圆形。
• display:flex并align-items:center使用现在所有主流浏览器都支持的Flexbox来自动调整我们的SVG和文本内容。
• <svg>...</svg>包含描述我们的zoomable图标的SVG数据。访问官方GCP图标库以下载完整的图标包。

填充内容

我们将SVG添加到模型中。让我们看看到目前为止GCP内容的样本布局是如何看的。

图形关系以及与SVG内容的交互

• 使用scale3d效果创建有影响力的突出显示效果。
• 使用dashed说明不同的关系。

下一步

我们设计了一个模式和一个视图引擎作为我们设计工作流程的基础。

在下一部分中，我们将向UI添加导航功能。

---

边注

这个故事是一个由Javascript创建交互式信息图表的5部分系列。我们精心挑选了重要的内容，以便您可以快速找到基本部件并在项目中进行调整。它确实有助于您掌握一些CSS和HTML知识。隐藏了不相关的代码块。

所有视频插图均通过Chrome浏览器截屏。虽然该演示基于GCP，但您可以在组织结构图，生态系统，地铁地图，流程图，进度树，网络拓扑和任何图表图中找到应用程序。

非常感谢Chuck Erickson和Google团队提供了精彩的GCP解决方案图标和图表包。

转：https://medium.com/hackernoon/how-to-build-an-interactive-infographic-from-scratch-94128678c83b