基于d3.layout.cloud的动态词云在D3.v4及以上版本显示异常问题求助

你遇到的问题核心是d3.layout.cloud原始版本是针对D3v3开发的，和D3v4+的API存在兼容性差异，尤其是选择器（selection）和过渡（transition）的处理逻辑变化，导致部分元素无法正确应用布局和动画。下面是具体的修复方案和修改后的完整代码：

关键修复点 #

1. 使用兼容D3v4+的d3-cloud库：
   原有的d3.layout.cloud.js仅适配D3v3，需要替换为支持D3v4/v5的版本（该库已更新，可获取最新构建文件）。

2. 合并Enter和Update选择器：
   D3v4+中，enter()返回的新元素选择器与原update选择器是分离的，必须通过merge()将两者合并，才能让新元素和已有元素都应用过渡动画与布局属性。

3. 适配D3v4+的颜色比例尺：
   原d3.scale.category20()在v4+中已被替换为d3.scaleOrdinal(d3.schemeCategory10)（你已备注这一点，这里再强调下）。

修改后的完整代码 #

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v4.js"></script>
<!-- 替换为兼容D3v4+的d3-cloud版本 -->
<script src="https://cdn.jsdelivr.net/npm/d3-cloud@1.2.5/build/d3.layout.cloud.min.js"></script>
<script>
function wordCloud(selector) {
  // 适配v4+的颜色比例尺（如需多色可取消注释）
  // var fill = d3.scaleOrdinal(d3.schemeCategory10);
  var svg = d3.select(selector).append("svg")
      .attr("width", 500)
      .attr("height", 500)
      .append("g")
      .attr("transform", "translate(250,250)");

  function draw(words) {
    var cloud = svg.selectAll("g text")
        .data(words, function(d) { return d.text; });

    // 新增元素初始化
    cloud.enter()
        .append("text")
        .style("font-family", "Impact")
        .style("fill", "black")
        .attr("text-anchor", "middle")
        .attr('font-size', 1)
        .text(function(d) { return d.text; });

    // 合并enter和update选择器，确保所有元素都能应用过渡
    cloud = cloud.merge(cloud.enter());

    // 应用布局与动画效果
    cloud
        .transition()
        .duration(600)
        .style("font-size", function(d) { return d.size + "px"; })
        .attr("transform", function(d) {
          return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .style("fill-opacity", 1);

    // 移除退出元素
    cloud.exit()
        .transition()
        .duration(200)
        .style('fill-opacity', 1e-6)
        .attr('font-size', 1)
        .remove();
  }

  return {
    update: function(words) {
      d3.layout.cloud().size([500, 500])
          .words(words)
          .padding(5)
          .rotate(function() { return ~~(Math.random() * 2) * 90; })
          .font("Impact")
          .fontSize(function(d) { return d.size; })
          .on("end", draw)
          .start();
    }
  }
}

// 示例数据
var words = [
  "You don't know about me without you have read a book called The Adventures of Tom Sawyer but that ain't no matter.",
  "The boy with fair hair lowered himself down the last few feet of rock and began to pick his way toward the lagoon.",
  "When Mr. Bilbo Baggins of Bag End announced that he would shortly be celebrating his eleventy-first birthday with a party of special magnificence, there was much talk and excitement in Hobbiton.",
  "It was inevitable: the scent of bitter almonds always reminded him of the fate of unrequited love."
]

function getWords(i) {
  return words[i]
      .replace(/[!\.,:;\?]/g, '')
      .split(' ')
      .map(function(d) { return {text: d, size: 10 + Math.random() * 60}; })
}

function showNewWords(vis, i) {
  i = i || 0;
  vis.update(getWords(i ++ % words.length))
  setTimeout(function() { showNewWords(vis, i + 1)}, 2000)
}

var myWordCloud = wordCloud('body');
showNewWords(myWordCloud);
</script>
</body>
</html>

修复说明 #

• 替换了d3.layout.cloud的引入链接为兼容v4+的版本，确保布局计算逻辑与D3v4+的API匹配。
• 通过cloud.merge(cloud.enter())将新加入的元素和已有元素合并，让所有元素都能正确应用位置、旋转和字体大小的过渡动画。
• 保留了你修改的黑色填充，若需要多色词云，只需取消注释颜色比例尺的代码，并将style("fill", "black")改为style("fill", function(d, i) { return fill(i); })。

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