如何用d3.js生成静态词云？解决页面刷新布局变动问题

嗨，我来帮你搞定这个词云布局固定的问题！

首先，你的思路方向是对的——让rotate()交替返回0或90确实能固定旋转角度，但用全局变量的话虽然可行，其实有更优雅的方式避免全局污染，同时还能彻底解决刷新后布局变化的问题（毕竟位置变化不仅是旋转的锅，还有布局算法的随机性）。

方法一：给每个单词预先绑定固定旋转角度（最直观） #

你可以在预处理单词数据的时候，直接给每个单词对象添加一个rotate字段，按索引交替赋值0和90。这样每次刷新布局时，旋转角度都是固定的：

// 遍历单词数组，给每个单词分配固定旋转角度
word_entries = word_entries.map((item, index) => ({
  ...item,
  rotate: index % 2 === 0 ? 0 : 90
}));

// 然后在词云布局中直接使用这个预定义的值
d3.layout.cloud()
  .size([width, height])
  .timeInterval(20)
  .words(word_entries)
  .fontSize(d => xScale(+d.value))
  .text(d => d.key)
  .rotate(d => d.rotate) // 直接取预定义的角度
  // 其他配置...

方法二：用闭包维护计数器（避免全局变量） #

如果你不想修改原始数据，可以用闭包封装一个计数器，每次调用rotate函数时递增并返回交替角度：

// 用闭包创建一个带状态的旋转函数
const getRotateAngle = (() => {
  let count = 0;
  return () => {
    const angle = count % 2 === 0 ? 0 : 90;
    count++;
    return angle;
  };
})();

// 在布局中使用这个函数
d3.layout.cloud()
  .rotate(getRotateAngle)
  // 其他配置...

额外：彻底固定整个词云布局（位置+旋转） #

如果你不仅想固定旋转角度，还想让单词位置也不随刷新变化，那还要处理词云布局的随机性——默认情况下D3词云用Math.random()计算位置，每次刷新结果不同。你可以自定义一个固定的随机数生成器（比如带种子的伪随机函数），替换布局的random方法：

// 带固定种子的伪随机函数（示例种子为123）
function seededRandom(seed = 123) {
  let x = Math.sin(seed++) * 10000;
  return x - Math.floor(x);
}

// 在布局中设置固定的随机函数
d3.layout.cloud()
  .random(seededRandom)
  .rotate(d => d.rotate) // 搭配前面的固定旋转方法
  // 其他配置...

关于你提到的d3.scale.category20()思路 #

其实可以用序数比例尺来映射索引到旋转角度，本质和方法一类似：

const rotateScale = d3.scale.ordinal()
  .domain(d3.range(word_entries.length)) // 每个单词的索引
  .range([0, 90]); // 交替返回这两个值

// 布局中使用
d3.layout.cloud()
  .rotate((d, i) => rotateScale(i))
  // 其他配置...

总的来说，预处理数据绑定旋转角度的方法最清晰易维护，如果你需要完全固定布局，记得加上固定随机数生成器的步骤哦！

内容的提问来源于stack exchange，提问作者MugenTwo