var layout = d3.layout.cloud() .size([500, 300]) .words(theme) // wordList.map(function(d) { // return {text: d, size: 10 + Math.random() * 50}; // }) .padding(5) .rotate(function() { return ~~(Math.random() * 1) * 90; }) .font("STXinwei") .fontSize(function(d) { return d.size; }) .on("end", draw); layout.start(); function draw(words) { d3.select(".wordcloud").html(""); //enter var mywords=d3.select(".wordcloud") .append("svg") .attr("width", layout.size()[0]) .attr("height", layout.size()[1]) .append("g") .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")") .selectAll("text") .data(words) .enter() .append("text") .attr("class","word") .style("font-size", function(d) { return d.size + "px"; }) .style("font-family", "STXinwei") .style("fill", function(d, i) { fill(i); }) .attr("text-anchor", "middle") .attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; }) .text(function(d) { // console.log(d.word); return d.word; })//这里要用d,而不是用i .on("mouseover",function(d,i){ d3.select(this) .transition() .duration(500) .attr("fill","gray"); d3.select(this) .select("text") .text(d.size) .attr("class",".poems"); // return d.size; }) .on("mouseout",function(d,i){ d3.select(this) .transition() .duration(1000) .attr("fill","black"); }) .on("click", function(d,i) { // console.log(i); // console.log(i.word); // console.log(d); showPoems(i.word); })//这里要用i,而不是用d .append("title") .text(function(d){ return "使用次数:"+d.size+"次"; }); 修改上述代码使得词云的显示集中在某个固定的多边形内，词与词之间越紧密越好

要实现词云的显示集中在某个固定的多边形内，可以通过以下步骤进行修改：

1.定义一个多边形的路径，并将其作为 clipPath 元素加入到 SVG 中。

2.在绘制词云之前，将 layout.words() 的值限制在多边形内部。可以通过以下方法实现：

- 遍历所有的词，将其位置限制在多边形内部。

- 在 layout.on("end", draw) 方法中，遍历所有的词，如果其位置在多边形外部，则将其移动到多边形内部。

3.在绘制词云时，将其位置限制在多边形内部。

下面是修改后的代码：

// 定义多边形的路径
var polygon = [[100, 100], [400, 100], [400, 300], [100, 300]];
var polygonPath = "M" + polygon.join("L") + "Z";

// 将多边形加入到 SVG 中
d3.select("svg").append("clipPath")
    .attr("id", "polygon")
    .append("path")
    .attr("d", polygonPath);

// 将 layout.words() 的值限制在多边形内部
layout.words(layout.words().filter(function(d) {
    var x = d.x + layout.size()[0] / 2;
    var y = d.y + layout.size()[1] / 2;
    return d3.polygonContains(polygon, [x, y]);
}));

// 在 layout.on("end", draw) 方法中将词的位置限制在多边形内部
layout.on("end", function(words) {
    words.forEach(function(d) {
        var x = d.x + layout.size()[0] / 2;
        var y = d.y + layout.size()[1] / 2;
        if (!d3.polygonContains(polygon, [x, y])) {
            var point = d3.polygonCentroid(polygon);
            d.x = point[0] - layout.size()[0] / 2;
            d.y = point[1] - layout.size()[1] / 2;
        }
    });
    draw(words);
});

// 在绘制词云时，将其位置限制在多边形内部
var mywords = d3.select(".wordcloud")
    .append("svg")
    .attr("width", layout.size()[0])
    .attr("height", layout.size()[1])
    .append("g")
    .attr("clip-path", "url(#polygon)")
    .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
    .selectAll("text")
    ...