我如何修改 Jason Davies 的 d3.js 词云以创建词云对？

编程问答 2022-05-23

问题描述

目前我正在使用 Jason Davies 提供的词云示例。我现在拥有的是：

enter image description here

我想要的是这样的每个单词的词云对（我只画了一个矩形，但我希望所有单词都有它）：

enter image description here

如何编辑代码以在原始单词的左侧显示单词对？我画的矩形只是因为我觉得右对齐文本会更容易，但如果有其他方式我也愿意听取他们的意见。最终词云中不需要矩形。我只是把它留在那里，这样会更容易可视化。

这是代码和硬编码数据：

var myWords = [
{word: "Running",size: "10",pairs:["happy","sad","angry"]},{word: "Surfing",size: "20",{word: "climbing",size: "50",{word: "Kiting",size: "30",{word: "Sailing",{word: "SNowboarding",size: "60",{word: "Flying",{word: "Crying",{word: "Soaking",{word: "Sleeping",{word: "Dying",{word: "Peeing","angry"]} ]

这是我从Jason Davies获得的当前代码

// set the dimensions and margins of the graph
var margin = {top: 10,right: 10,bottom: 10,left: 10},width = 650 - margin.left - margin.right,height = 450 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#wordCloudContainer").append("svg")
    .attr("width",width + margin.left + margin.right)
    .attr("height",height + margin.top + margin.bottom)
.append("g")
    .attr("transform","translate(" + margin.left + "," + margin.top + ")");

// Constructs a new cloud layout instance. It run an algorithm to find the position of words that suits your requirements
// Wordcloud features that are different from one word to the other must be here
var layout = d3.layout.cloud()
.size([width,height])
.words(myWords.map(function(d) { return {text: d.word,size:d.size}; }))
.padding(10)        //space between words
.rotate(0)   
.fontSize(function(d) { return  Math.log10(d.size)*40; })
.on("end",draw);
layout.start();

// This function takes the output of 'layout' above and draw the words
// Wordcloud features that are THE SAME from one word to the other can be here
function draw(words) {
svg
    .append("g")
    .attr("transform","translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
    .selectAll("text")
    .data(words)
    .enter().append("text")
    .style("font-size",function(d) { return d.size; })  
    .style("fill","#69b3a2")
    .attr("text-anchor","middle")
    .style("font-family","Impact")
    .attr("transform",function(d) {
    return "translate(" + [d.x,d.y]  + ")rotate(" + d.rotate + ")";
    })
    .text(function(d) { return d.text; })
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptsvgsvgsvgword-cloud