my words

To be a realistic poineer, never give up!

 

Pay back self power,and living in the truthful life!

 

Form a competent man ,

 

                                                simon

这里,有,

一,求实;

二,创新;

三,还自己以力量;

四,真实地生活;

五,做一个有能力的人;

我就是simon

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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+"次"; }); 修改上述代码使得词云的显示集中在某个固定的多边形内,词与词之间越紧密越好
06-06
要实现词云的显示集中在某个固定的多边形内,可以通过以下步骤进行修改: 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") ... ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值