如何在d3.cloud中实现-60°至60°连续旋转，还原Jason Davies词云效果？

我帮你分析下这个问题——大概率是你的旋转角度生成逻辑被限制成了固定的0°和60°，咱们一步步调整就能实现示例里的任意中间角度效果：

1. 排查并修改角度生成函数 #

首先检查你代码里控制旋转角度的部分，很多时候出现固定角度是因为直接写死了二选一的逻辑，比如：

// 错误示例：仅返回0°或60°
function getRotation() {
  return Math.random() > 0.5 ? 0 : 60;
}

把它改成支持连续随机角度的函数，比如生成-90°到90°之间的任意角度（覆盖水平、向左/向右倾斜的效果）：

// 生成-90°~90°之间的随机整数角度
function getRandomRotation() {
  return Math.floor(Math.random() * 181) - 90;
  // 如果只想要正角度（0°~90°），可以写成：return Math.floor(Math.random() * 91);
}

如果想要带步长的中间角度（比如15°间隔：0°、15°、30°...），可以用数组随机选：

// 按15°步长生成随机角度
function getSteppedRotation() {
  const angleOptions = [0, 15, 30, 45, 60, 75, 90];
  return angleOptions[Math.floor(Math.random() * angleOptions.length)];
}

2. 在词云布局中应用新的角度函数 #

确保你的词云布局（比如d3-cloud）的rotate参数调用的是上面的新函数，而不是固定值：

d3.layout.cloud()
  .size([width, height]) // 词云容器尺寸
  .words(yourWordData) // 你的词数据数组
  .rotate(function() { return getRandomRotation(); }) // 替换成自定义角度函数
  .fontSize(d => d.size) // 按词频设置字号
  .font("Impact")
  .on("end", drawWordCloud) // 绘制完成的回调
  .start();

3. 确保渲染时正确应用角度 #

在绘制文本的回调函数里，要保证旋转角度被正确传递到transform属性中：

function drawWordCloud(words) {
  d3.select("#wordcloud-container")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", `translate(${width/2}, ${height/2})`) // 居中对齐
    .selectAll("text")
    .data(words)
    .enter()
    .append("text")
    .style("font-size", d => `${d.size}px`)
    .style("font-family", "Impact")
    .attr("text-anchor", "middle")
    // 关键：正确使用d.rotate传递生成的角度
    .attr("transform", d => `translate(${d.x}, ${d.y})rotate(${d.rotate})`)
    .text(d => d.text);
}

4. 可选优化：根据词长调整旋转逻辑 #

如果想让词云更美观，可以给长词设置固定水平角度，短词随机旋转，避免长词倾斜后可读性差：

function getSmartRotation(d) {
  // 词长度超过6个字符时保持水平，否则随机旋转
  return d.text.length > 6 ? 0 : Math.floor(Math.random() * 181) - 90;
}

替换到布局的rotate参数里即可：.rotate(getSmartRotation)

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