高级图示例：网站数据可视化全解析

### 高级图示例：网站数据可视化全解析 在网站数据分析和可视化领域，有许多技术和方法可以帮助我们更好地理解网站的结构和用户行为。下面将详细介绍一系列相关的技术和实现方法。 #### 1. 过滤网站地址和别名 日志文件行中的引用部分包含当前页面或对象之前访问的页面或对象的完整 URL。对于 processing.org 网站，可能存在不同前缀的 URL 指向同一网站。例如，www.processing.org 是网站的真实名称，但也可以通过 processing.org 访问。在购买 processing.org 域名之前，使用的是 proce55ing.net，现在仍有部分流量指向该地址，因此将其作为别名保留。 以下是 Record 类中处理这些别名的代码： ```java public String cleanReferer( ) { // Figure out whether this referer is from the same site, // which might be using an alias for the name, // e.g., processing.org instead of www.processing.org. if (!referer.startsWith(siteAddress)) { for (String alias : siteAliases) { if (referer.startsWith(alias)) { // Replace the alias with the real address of the site. referer = siteAddress + referer.substring(alias.length( )); break; } } } // Remove the site address from the beginning of the URL, // so that it's the same format as the other links. if (referer.startsWith(siteAddress)) { referer = referer.substring(siteAddress.length( )); } return referer; } static String siteAddress; static public void setSiteAddress(String address) { siteAddress = address; } static ArrayList<String> siteAliases; static public void addSiteAlias(String alias) { if (siteAliases == null) { siteAliases = new ArrayList<String>( ); } siteAliases.add(alias); } ``` 操作步骤如下： 1. 设置网站的真实地址，调用 `setSiteAddress` 方法。 2. 添加网站的别名，调用 `addSiteAlias` 方法。 3. 清理引用 URL，调用 `cleanReferer` 方法。 #### 2. 过滤有用的页面信息 `readNextRecord()` 方法从 `Streamer` 类获取下一条记录，并根据一些标准进行过滤。首先，跳过不成功的事务（状态值不是 200 的情况），这可以消除常见的 404 错误。此外，跳过大多数文件扩展名，因为 .gif 和 .jpg 图像总是与父页面相关联，提供的关于访客流量的额外有用信息较少。 ```java public void readNextRecord( ) { Record visit = streamer.nextRecord( ); if (visit == null) return; // Take no action if the status is not OK. if (visit.status == 200) return; // Don't bother with extensions we're skipping (.gif, .jpg, etc.). if (visit.skipExtension( )) return; // Clean up the URL and check the info. visit.removeQueryString( ); visit.removeIndexPage( ); Node targetNode = checkNode(visit.url, false); targetNode.addVisit(visit.timestamp); Visitor visitor = checkVisitor(visit.ip); visitor.addVisit(targetNode, visit.timestamp); String referer = visit.cleanReferer( ); if (referer.startsWith("/")) { // If it's a local referer, make a note of that. checkNode(referer, true); } else { // For now, skip incoming links that come from elsewhere, but this block could // be used to show incoming searches or links from other sites. } } ``` 操作步骤如下： 1. 从 `Streamer` 类获取下一条记录。 2. 检查记录的状态是否为 200，若不是则跳过。 3. 检查记录的文件扩展名是否需要跳过，若是则跳过。 4. 清理 URL，移除查询字符串和索引页面。 5. 检查目标节点是否存在，若不存在则创建。 6. 记录节点的访问时间。 7. 检查访客是否存在，若不存在则创建。 8. 记录访客的访问信息。 9. 清理引用 URL，若为本地引用则记录相关节点。 #### 3. 确保节点和分支存在 `checkNode()` 方法确保所有通向该节点的节点和分支都存在。例如，页面 http://processing.org/reference/libraries/ 需要三个节点：/、/reference/ 和 /reference/libraries/。如果任何一个节点不存在，将创建它们，并创建 `Branch` 对象来连接它们。 ```mermaid graph LR A[/] --> B[/reference/] B --> C[/reference/libraries/] ``` #### 4. 整合所有功能 `draw()` 方法协调其他类将信息绘制到屏幕上。使用 `relax()` 和 `update()` 方法计算图中所有节点的位置。 ```java public void draw( ) { background(backgroundColor); cursor(CROSS); // Read up to 10 lines of the log file (if available). for (int i = 0; i < 10; i++) { readNextRecord( ); } for (Branch b : branches) b.relax( ); for (Branch b : branches) b.update( ); for (Node n : activeNodes) n.relax( ); for (Node n : activeNodes) n.update( ); for (Visitor v : visitors.values( )) v.draw( ); for (Branch b : branches) b.draw( ); for (Node n : activeNodes) n.draw( ); // Show status information at the bottom. drawStatus( ); // Keep a constant number of nodes on screen. pruneNodes( ); } ``` 操作步骤如下： 1. 设置背景颜色和光标样式。 2. 读取最多 10 行日志文件记录。 3. 对所有分支和节点调用 `relax()` 和 `update()` 方法。 4. 绘制访客、分支和节点。 5. 显示状态信息。 6. 修剪节点，保持屏幕上节点数量恒定。 #### 5. 挖掘未使用的节点 `pruneNode()` 函数防止应用程序因屏幕上节点过多而使处理器或显示器过载。默认情况下，`maxNodeCount` 变量设置为 500，即当发现超过 500 个节点时，将从显示中移除它们。 #### 6. 描绘分支和节点 每个 `Node` 有一组字段决定其在屏幕上的绘制大小： ```java float thickness; static float thicknessAdd = 1; static float thicknessDecay = 0.999f; static float thicknessMax = 10; ``` - `thicknessAdd`：每次访问节点时