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+"次"; }); 修改上述代码使得词云的显示集中在某个固定的多边形内，词与词之间越紧密越好