# Visitor Flow

对用户行为追踪进行可视化，主要是对同一个页面进行访问的会话进行统计，并对这些会话的流向进行展现。

APP 或者网站的埋点会记录下用户的页面跳转，我们追踪的就是这些跳转。

这种可视化的图表类似于桑基图，但是与桑基图相比，多了一些交互，展现形式也有所区别。

# 会话

每一个 Visitor 就是一个用户，用户在第一次访问我们的网站会生成一个id。

以后这个 Visitor 访问这个网站的时候，就会把用户 id 带到服务器。

会话分为开始和结束，会话开始就是第一次访问我们的页面，结束就是用户关掉了我们的页面。

从会话的开始到结束，用户的每一次页面跳转我们称之为『互动』。

除了初始页面以外，我们一共会展现用户的十一次互动。


# 概览

Visitor Flow 中最基本的概念，需求就和这些概念有关系。

![Overview](./images/overview.png)

## 导航

点击左右按钮会移动一个互动的距离。

点击 Home 会回到原始位置。

下面的 Slider 是对『页面』的高度进行缩放，『页面』的高度变化之后，连线的宽度也会进行变化。

点击房子图标回到桑基图起始位置（即第一列），点击左右箭头则向左或向右移动，拖动+-号滑竿支持放大和缩小桑基图。
放大缩小时矩形框和流量线的高度也将随着响应比例放大或缩小。目前最大放到1500%，以初始默认高度为最小倍数。
鼠标点击空白区域，会显示出手型，可以左右移动画布。 

## 渠道纬度

第一列为数据来源，需要显示6个数据来源。第一个数据来源需要显示所有的数据流向起始页面的流向，剩余5个只需要显示自己的最大流量即可。

## 用户互动列

第二列到第十二列为第一次到第十一次交互。

即展示按上述筛选条件的数据所选维度下用户互动流量桑基图。【互动命名】分别为 起始页面、首次互动、第2次互动......第N次互动，我们目前最多统计到第12次互动。
【互动概况】即显示入口流量的总会话数中有多少会话数流失，即显示文字“在N次会话中，有M次用户中途离开”。
【互动具体页面】即展示所有参与本次互动的页面信息。矩形框大小的规则和上文中入口维度的一致。样式设计如上图所示。
显示该页面的页面图标、页面名，之前路径流经此页面的会话数。带有向下红色箭头的数据分流为流失流量。
流失条的高度为（流失流量占比*该矩形框的高度）+12px，宽度规则为：当矩形框的高度大于等于10px时，流失条的宽度为10px，当矩形框的高度小于10px时，流失条的宽度为2px。


某一页面下游出口流量线上下顺序按流量从大到小显示。当未突出显示某一页面或某一路径的流量时，为避免线条太多，会做一定的隐藏处理。
规则为：在没有突显的情况，只会显示在下游的各个页面中流量占比最大的流量线（即每个下游的页面中选取从上游页面下来的流量线中占比最大的一根），
其他的流量线则做隐藏处理，只是隐藏中间的部分，入口和出口部分会保留一小部分，用以表示有流量互动。


### 用户互动页面

每一列中的元素代表了多少流量从此处经过，比如：一个元素代表的是 /guide 这个 URL，有 3.8w 个流量从此处经过。

流量经过之后可能有两个去向：
1. 流失
2. 到了下一个页面，比如从 /guide 到了 /member。

### 流失流量

流失流量显示在列元素的右侧，使用红色的弯曲箭头进行显示。

### 流量元素的高亮

## Connector

流量的流向使用的是 Connector 进行连接，在不高亮的情况下，每个 Connector 代表了从上游到下游的全部流量。

Connector 显示在列元素的右侧，会连接上游与下游，宽度由具体的流量数值决定。

Connector 可以进行高亮，高亮之后的 Connector 会影响这个 Visitor Flow 的显示。

在高亮之后，Visitor Flow 的所有列经过这个 Connector 的流量都会进行显示。