D3词云报错：Cannot read properties of undefined (reading 'cloud')

算力阿峰

2026-7-26

问题原因及解决方案

错误根源

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'cloud')，本质是两个核心问题：

D3 v4及以上版本已移除d3.layout命名空间，核心库中不存在这个对象；
词云是D3的第三方扩展功能，并非D3核心库自带，必须单独引入对应的d3-cloud库才能使用。

修复方案

1. 补充引入d3-cloud库

在HTML中，D3核心库之后添加兼容D3 v7的d3-cloud库脚本：

<body>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <!-- 引入d3-cloud第三方词云库 -->
    <script src="https://cdn.jsdelivr.net/npm/d3-cloud@2.5.1/dist/d3-cloud.min.js"></script>
    <svg width="500" height="300"></svg>  
    <script src="word-cloud-script.js"></script>
</body>

2. 修正词云布局调用代码

新版本d3-cloud库使用d3.cloud()替代了旧版的d3.layout.cloud()，修改JS中的布局定义部分：

// 原错误代码
// var layout = d3.layout.cloud()

// 修改后的正确代码
var layout = d3.cloud()
    .size([width - margin.left - margin.right, height - margin.top - margin.bottom])
    .words(data.map(function (d) { return { text: d, size: 10 + Math.random() * 40 }; }))
    .padding(5)
    .rotate(function () { return ~~(Math.random() * 2) * 90; })
    .fontSize(function (d) { return d.size; })
    .on("end", draw);