D3 扫盲（三）：用力导向布局画有向的服务调用拓扑图
比例尺学完了，颜色和粗细这两个映射问题算是解决了。剩下的问题更麻烦：几十个服务节点摆在哪个坐标上，连线怎么表示是谁调用谁，怎么让人一眼看出流量在往哪个方向流动。这三个问题不解决，大盘就只能是一堆静态方块，看不出拓扑关系。这篇整理清楚力导向布局、箭头和方向动画这几块，D3 扫盲系列到这里就收尾。 节点坐标不是算出来的，…
#可视化
共 4 篇文章
D3 扫盲（二）：比例尺与 SVG 图形基础
选择集会用了，但画图还得靠比例尺把数据映射到像素。这篇接着往下写。 比例尺是什么 拿到的数据和要画的像素、颜色不是一回事。QPS 从 0 到 5000，圆点半径想控制在 0 到 40 像素之间，直接把 QPS 数值当半径用肯定不行，5000 像素的圆早就超出屏幕了。中间需要一个函数，把 QPS 的取值范围换算成像素的…
D3 扫盲（一）：选择集与数据绑定
最近在做一个服务稳定性大盘，想把服务调用关系画成一张有向图，节点按 QPS 染色，调用线按流量染色。找了一圈现成的图表方案，条形图、饼图都有现成的，这种带方向的动态拓扑图基本没有能直接拿来用的，打算用 D3.js 自己画。之前没系统用过 D3，边看文档边记笔记，方便后面直接查。这是第一篇，先搞清楚最基础的部分：选择集…
外卖服务稳定性热力图：找不到现成方案，打算用 D3 自己画
最近外卖那边服务出过几次问题，排查起来很费劲：一个下单接口超时，值班同学得先看是不是自己服务的问题，再一层层查是不是下游某个依赖顶不住了。现在看这些指标全靠翻监控平台里一条条的曲线，服务多起来之后没人能一眼看出问题出在调用链的哪一环。 组里提了个想法：做一个大盘，把服务之间的调用关系画成一张图，谁的 QPS 高、谁调…