尧图网站建设 
文章目录一、先说结论：它凭什么值得你花一小时读完二、它到底是什么：一句话 + 一个背景三、数据格式：三分钟就能上手的「万能表格」四、功能全景：六个能力，环环相扣五、模块架构：七层分层，各司其职六、系统架构：纯前端 + 静态托管 + 外部服务七、核心运行流程：从粘贴 URL 到一张雷达八、时序图：一次完整调用的「时间线」九、重难点源码拆解：真正值钱的四个地方难点一：调度中枢 `factory.js`——一行判断搞定三种数据源难点二：防碰撞布点算法——「随机撒点」也能撒得整整整齐齐难点三：环半径计算——一条「黄金数列」决定美观度难点四：安全清洗——白名单过滤，一行都不能省十、快速上手：三种姿势，任选其一姿势一：本地开发（改代码必用）姿势二：Docker 一键起（最快看到效果）姿势三：不想装 Node？一行 Docker 跑源码十一、进阶配置：让它长成「你公司专属」的样子十二、一个容易被忽略的兼容设计：Hold → Caution十三、工程化与质量保障：为什么它值得被信任十四、踩坑指南：来自源码的「血泪经验」十五、结语：一张图背后的方法论一、先说结论：它凭什么值得你花一小时读完先说一个场景，你一定经历过。季度技术复盘会上，讨论「我们用不用这个框架」，白板上画了三个圈、四条线，画完五分钟就被擦掉。下周来了新同事，没人记得当时的结论是怎么来的。问题的本质不是「缺一张图」，而是缺一张「活着的图」。ThoughtWorks 每年发布的 Technology Radar（技术雷达）就是解决这个问题的标杆。它把技术分成四个环、四个象限，用一张漂亮又信息密度极高的图告诉全世界：哪些技术在采纳、哪些在试验、哪些要谨慎。而 ThoughtWorks 直接把这套方法论开源成了一个工具——build-your-own-radar（简称 BYOR）。你只要有一份符合格式的表格，粘一个链接进去，就能生成一张和你公司 Logo 一个风格的技术雷达。它背后的理念一句话概括：数据源即配置。你不需要写前端、不需要买服务，只要维护一张表，雷达随时刷新。一张图看懂它能做什么：二、它到底是什么：一句话 + 一个背景一句话定义：Build Your Own Radar 是一个开源的、用来生成「交互式技术雷达」的库，灵感来自 ThoughtWorks 官方的 Technology Radar。它最妙的地方在于——它不是一个「画图工具」，而是一个「数据渲染引擎」。你给它结构化数据，它负责把数据变成一张会呼吸的图。它的技术栈非常克制，几乎全是成熟前端生态的「老熟人」：类别选型作用可视化核心D3.js v7环形弧、光点、坐标计算的全部绘制提示浮层d3-tip悬停显示信息卡片数据请求d3.csv / d3.json直接读取 CSV / JSON通用工具jQuery、lodash历史包袱与工具函数安全清洗sanitize-html白名单过滤输入，防 XSS随机数chance布点算法的确定性随机源构建Webpack 5打包与压缩测试Jest + Cypress单测 + 端到端部署Nginx + Docker静态托管与镜像分发许可证是AGPL-3.0，当前主版本为1.2.1。这两个信息很重要，后面「商用注意」一节会专门讲。三、数据格式：三分钟就能上手的「万能表格」BYOR 支持的输入格式有三种，但它们的列结构完全一致。你只要记住这几列，就掌握了全部。必需列：列名含义示例name技术/条目名称Composerring所处环adopt / trial / assess / cautionquadrant所属象限tools / techniques / platforms / languages frameworksdescription描述一段可含少量 HTML 的说明isNew是否新出现TRUE / FALSE关键点：表格里isNew或status至少要有一个，否则校验不通过。可选的status列（用来展示光点移动轨迹），接受以下大小写不敏感的值：New：第一次出现在雷达上Moved In：向圆心移动（采纳度上升）Moved Out：向边缘移动（采纳度下降）No Change：位置没变三种数据源的写法分别是：① Google Sheet——把表格设为「Anyone with the link → Viewer」，然后把链接粘进去即可。私有表格会触发 Google One Tap 登录，授权后同样能生成。② CSV——一个可公开访问的 CSV 链接，格式与表格完全一致：name,ring,quadrant,isNew,description Composer,adopt,tools,TRUE,"Although the idea of dependency management ..." Canary builds,trial,techniques,FALSE,"Many projects have external code dependencies ..." Apache Kylin,assess,platforms,TRUE,"Apache Kylin is an open source analytics solution ..." JSF,Caution,languages frameworks,FALSE,"We continue to see teams run into trouble using JSF ..."③ JSON——一个由对象数组构成的 JSON，字段同上：[{"name":"Composer","ring":"adopt","quadrant":"tools","isNew":"TRUE","description":"Although the idea of dependency management ..."}]一个必须记住的细节：官方托管的radar.thoughtworks.com对ring和quadrant的名称有固定要求（就是上面那套官方命名）。而你自己私有部署的 BYOR 没有这个限制，可以用环境变量自定义名称。四、功能全景：六个能力，环环相扣在动手之前，先把它的能力地图看清楚（见开篇的「功能全景图」）。它看起来简单，其实是六块能力拼出来的完整闭环：三源数据接入：Google Sheet（公开/私有）、CSV、JSON，一条链接搞定；四环 × 四象限建模：把零散的技术条目结构化归档；智能防碰撞布点：随机撒点 + 迭代避让，保证图面整洁；交互式雷达：关键字搜索、象限导航、悬停高亮双向联动；移动状态标记：New / Moved In / Moved Out / No Change 四种轨迹标识；一键部署：Docker 镜像或本地 npm，附 PDF 打印导出。从数据接入、建模，到布点、交互，再到状态标记与部署，六块能力缺一不可。五、模块架构：七层分层，各司其职很多人第一次看这个仓库会懵——src下文件不少。但一旦你看懂它的分层，整个项目就瞬间清晰了。它从入口到渲染一共分成七层，每一层只做一件事：读图要点：入口层负责把页面挂起来，site.js里其实只有三行核心调用；调度层（factory.js）是整个项目的「交通枢纽」，它决定「数据从哪来、走哪条路」；数据接入层把三种数据源统一抽象（Google Sheet 走 gapi，CSV/JSON 走 d3）；校验清洗层是安全底线，负责表头校验、HTML 白名单、环名归一化；领域模型层把原始行数据变成Radar / Quadrant / Ring / Blip四类对象；渲染交互层才是 D3 真正发力的地方；样式资源层收尾，负责观感。六、系统架构：纯前端 + 静态托管 + 外部服务它没有后端数据库，架构干净得不像话。整体是三层：核心设计哲学：前端与数据服务彻底解耦。换个数据源，不需要动渲染核心一行代码——这正是「数据源即配置」的工程化落地。七、核心运行流程：从粘贴 URL 到一张雷达接下来是最关键的一环。当你在首页粘贴一个链接并点击「Build my radar」后，到底发生了什么？ 我把「一张 Excel 表格」变成了公司墙上最贵的那张图——深度拆解 ThoughtWorks 开源技术雷达 Build Your Own Radar
文章目录一、先说结论：它凭什么值得你花一小时读完二、它到底是什么：一句话 + 一个背景三、数据格式：三分钟就能上手的「万能表格」四、功能全景：六个能力，环环相扣五、模块架构：七层分层，各司其职六、系统架构：纯前端 + 静态托管 + 外部服务七、核心运行流程：从粘贴 URL 到一张雷达八、时序图：一次完整调用的「时间线」九、重难点源码拆解：真正值钱的四个地方难点一：调度中枢 `factory.js`——一行判断搞定三种数据源难点二：防碰撞布点算法——「随机撒点」也能撒得整整整齐齐难点三：环半径计算——一条「黄金数列」决定美观度难点四：安全清洗——白名单过滤，一行都不能省十、快速上手：三种姿势，任选其一姿势一：本地开发（改代码必用）姿势二：Docker 一键起（最快看到效果）姿势三：不想装 Node？一行 Docker 跑源码十一、进阶配置：让它长成「你公司专属」的样子十二、一个容易被忽略的兼容设计：Hold → Caution十三、工程化与质量保障：为什么它值得被信任十四、踩坑指南：来自源码的「血泪经验」十五、结语：一张图背后的方法论一、先说结论：它凭什么值得你花一小时读完先说一个场景，你一定经历过。季度技术复盘会上，讨论「我们用不用这个框架」，白板上画了三个圈、四条线，画完五分钟就被擦掉。下周来了新同事，没人记得当时的结论是怎么来的。问题的本质不是「缺一张图」，而是缺一张「活着的图」。ThoughtWorks 每年发布的 Technology Radar（技术雷达）就是解决这个问题的标杆。它把技术分成四个环、四个象限，用一张漂亮又信息密度极高的图告诉全世界：哪些技术在采纳、哪些在试验、哪些要谨慎。而 ThoughtWorks 直接把这套方法论开源成了一个工具——build-your-own-radar（简称 BYOR）。你只要有一份符合格式的表格，粘一个链接进去，就能生成一张和你公司 Logo 一个风格的技术雷达。它背后的理念一句话概括：数据源即配置。你不需要写前端、不需要买服务，只要维护一张表，雷达随时刷新。一张图看懂它能做什么：二、它到底是什么：一句话 + 一个背景一句话定义：Build Your Own Radar 是一个开源的、用来生成「交互式技术雷达」的库，灵感来自 ThoughtWorks 官方的 Technology Radar。它最妙的地方在于——它不是一个「画图工具」，而是一个「数据渲染引擎」。你给它结构化数据，它负责把数据变成一张会呼吸的图。它的技术栈非常克制，几乎全是成熟前端生态的「老熟人」：类别选型作用可视化核心D3.js v7环形弧、光点、坐标计算的全部绘制提示浮层d3-tip悬停显示信息卡片数据请求d3.csv / d3.json直接读取 CSV / JSON通用工具jQuery、lodash历史包袱与工具函数安全清洗sanitize-html白名单过滤输入，防 XSS随机数chance布点算法的确定性随机源构建Webpack 5打包与压缩测试Jest + Cypress单测 + 端到端部署Nginx + Docker静态托管与镜像分发许可证是AGPL-3.0，当前主版本为1.2.1。这两个信息很重要，后面「商用注意」一节会专门讲。三、数据格式：三分钟就能上手的「万能表格」BYOR 支持的输入格式有三种，但它们的列结构完全一致。你只要记住这几列，就掌握了全部。必需列：列名含义示例name技术/条目名称Composerring所处环adopt / trial / assess / cautionquadrant所属象限tools / techniques / platforms / languages frameworksdescription描述一段可含少量 HTML 的说明isNew是否新出现TRUE / FALSE关键点：表格里isNew或status至少要有一个，否则校验不通过。可选的status列（用来展示光点移动轨迹），接受以下大小写不敏感的值：New：第一次出现在雷达上Moved In：向圆心移动（采纳度上升）Moved Out：向边缘移动（采纳度下降）No Change：位置没变三种数据源的写法分别是：① Google Sheet——把表格设为「Anyone with the link → Viewer」，然后把链接粘进去即可。私有表格会触发 Google One Tap 登录，授权后同样能生成。② CSV——一个可公开访问的 CSV 链接，格式与表格完全一致：name,ring,quadrant,isNew,description Composer,adopt,tools,TRUE,"Although the idea of dependency management ..." Canary builds,trial,techniques,FALSE,"Many projects have external code dependencies ..." Apache Kylin,assess,platforms,TRUE,"Apache Kylin is an open source analytics solution ..." JSF,Caution,languages frameworks,FALSE,"We continue to see teams run into trouble using JSF ..."③ JSON——一个由对象数组构成的 JSON，字段同上：[{"name":"Composer","ring":"adopt","quadrant":"tools","isNew":"TRUE","description":"Although the idea of dependency management ..."}]一个必须记住的细节：官方托管的radar.thoughtworks.com对ring和quadrant的名称有固定要求（就是上面那套官方命名）。而你自己私有部署的 BYOR 没有这个限制，可以用环境变量自定义名称。四、功能全景：六个能力，环环相扣在动手之前，先把它的能力地图看清楚（见开篇的「功能全景图」）。它看起来简单，其实是六块能力拼出来的完整闭环：三源数据接入：Google Sheet（公开/私有）、CSV、JSON，一条链接搞定；四环 × 四象限建模：把零散的技术条目结构化归档；智能防碰撞布点：随机撒点 + 迭代避让，保证图面整洁；交互式雷达：关键字搜索、象限导航、悬停高亮双向联动；移动状态标记：New / Moved In / Moved Out / No Change 四种轨迹标识；一键部署：Docker 镜像或本地 npm，附 PDF 打印导出。从数据接入、建模，到布点、交互，再到状态标记与部署，六块能力缺一不可。五、模块架构：七层分层，各司其职很多人第一次看这个仓库会懵——src下文件不少。但一旦你看懂它的分层，整个项目就瞬间清晰了。它从入口到渲染一共分成七层，每一层只做一件事：读图要点：入口层负责把页面挂起来，site.js里其实只有三行核心调用；调度层（factory.js）是整个项目的「交通枢纽」，它决定「数据从哪来、走哪条路」；数据接入层把三种数据源统一抽象（Google Sheet 走 gapi，CSV/JSON 走 d3）；校验清洗层是安全底线，负责表头校验、HTML 白名单、环名归一化；领域模型层把原始行数据变成Radar / Quadrant / Ring / Blip四类对象；渲染交互层才是 D3 真正发力的地方；样式资源层收尾，负责观感。六、系统架构：纯前端 + 静态托管 + 外部服务它没有后端数据库，架构干净得不像话。整体是三层：核心设计哲学：前端与数据服务彻底解耦。换个数据源，不需要动渲染核心一行代码——这正是「数据源即配置」的工程化落地。七、核心运行流程：从粘贴 URL 到一张雷达接下来是最关键的一环。当你在首页粘贴一个链接并点击「Build my radar」后，到底发生了什么？