矩形词云需用JavaScript在canvas或svg中逐词计算位置、避让与旋转实现，CSS flex/grid无法满足语义权重、动态避让、旋转及响应式重布局等核心需求。
矩形词云不是靠 HTML 标签堆出来，而是用 JavaScript 在
或
上逐词计算位置、避让、旋转后绘制的；主流库中
默认布局就是矩形，
也支持
参数，但需注意中文换行和碰撞检测精度问题。
为什么不能用 CSS flex 或 grid 做矩形词云
CSS 布局只管“排列”，不管“语义权重”和“视觉避让”。词云的核心逻辑是：高频词字号大、位置居中、不重叠、可旋转——这些必须由 JS 实时计算每个词的
、
、
、
，再注入到 SVG 或 Canvas。用
只能做出静态标签云，无法实现真正的矩形填充式词云效果。
flex 容器内元素无法自动避开已占区域，词会堆叠或溢出边界
没有碰撞检测机制，高频词放大后必然覆盖低频词
无法按权重动态调整旋转角度（如
到
随机分布）
响应式缩放时，CSS 无法重跑布局算法，词云会变形或留白
矩形布局的关键参数设置
的
和默认
是矩形词云的基础，但真正影响填充密度和可读性的，是这几个参数：
：词与词之间的最小像素间距，设为
容易粘连，>5 则稀疏；中文建议用
：控制旋转范围，避免全横排或全竖排，-15°~+15° 对中文更友好
或
：必须显式指定中文字体，否则 fallback 到英文，显示为方块
：对原始频次做对数压缩，防止“一词独大”撑满画布
务必在
中统一处理
颜色和
，否则部分词可能无样式
启用矩形布局的注意事项
更轻量，开箱即用，但矩形模式（
）不是默认行为，且中文支持依赖字体加载时机：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
必须传入
，否则默认是
（球面投影）
中文词需确保
指向已加载的本地字体，比如
和
单位是像素，别用
或
，否则渲染异常
如果词云空白，大概率是
数据格式不对：必须是
数组，不是对象数组
移动端需加
和
，否则缩放后词溢出容器看不见
真正难的不是调出矩形轮廓，而是让所有词在限定区域内自然分布、不重叠、不截断、中文字形完整——这取决于你选的库是否做了足够细的碰撞检测，以及你有没有对原始权重做平滑处理。没做对数归一化、又没设
和
范围的词云，看起来永远像乱扔的贴纸，而不是一张有呼吸感的云。
d3-cloudwordcloud2.jsshape: 'rect'xyrotatefontSizedisplay: flexrotate: -3030d3-cloudd3-cloud.size([width, height]).shape('rectangle').padding(2)03–4.rotate(() => ~~(Math.random() * 3) * 15 - 15).font('Microsoft YaHei')'sans-serif'.fontSize(d => Math.log(d.weight + 1) * 20).on('end', draw)filltext-anchorwordcloud2.jswordcloud2.jsshape: 'rect'shape: 'rect''circle'fontFamilyfontFamily: 'PingFang SC, Microsoft YaHei'minSizemaxSizeemremlist[[word, weight], ...]clearCanvas: truedrawOutOfBound: falsepaddingrotate