D3 扫盲（三）：用力导向布局画有向的服务调用拓扑图
比例尺可将指标映射为颜色和线条粗细，但不能确定服务节点的位置、调用方向或流量动画。本文说明力导向布局、箭头和方向动画的实现。 力模拟计算节点坐标 一开始想自己写个算法分层摆放节点，把服务调用关系整理成树状结构，一层一层往下排。试了一下发现行不通，外卖这边的服务调用关系不是树，是网状的：A 调 B，B 反过来也可能被 C…
#
#可视化
共4篇文章
D3 扫盲（二）：比例尺与 SVG 图形基础
选择集负责创建和更新图形元素；比例尺负责将数据值映射为像素、颜色等视觉属性。 比例尺的作用 拿到的数据和要画的像素、颜色不是一回事。QPS 从 0 到 5000，圆点半径想控制在 0 到 40 像素之间，直接把 QPS 数值当半径用肯定不行，5000 像素的圆早就超出屏幕了。中间需要一个函数，把 QPS…
D3 扫盲（一）：选择集与数据绑定
服务稳定性大盘需要将服务调用关系绘制为有向图，并按 QPS 为节点和调用线着色。现有图表库未能直接满足动态拓扑图的需求，因此使用 D3.js 实现。本文说明基础概念：选择集（selection）和数据绑定（data join）。 用的是 D3 v3（页面上直接 引入的那种），下面代码都是按 v3 的 API…
外卖服务稳定性热力图：使用 D3 绘制调用拓扑
最近外卖服务出现过几次问题。一个下单接口超时时，值班同学需要先判断是否为自身服务的问题，再逐层排查下游依赖是否异常。当前主要通过监控平台中的单条曲线查看指标；服务数量增加后，调用链中的异常位置不易直接定位。 外卖团队需要一个整体查看服务运行情况的视图：将服务调用关系绘制为一张图，同时展示 QPS…