d3JS 云图：避免单词重叠

Question

我是 d3.js 的新手，在 Whosebug 中我找不到问题的解决方案（我尝试了所有的答案）所以我会尝试写作。下面的代码有效，但我想避免单词重叠，我不知道我哪里错了这是我的代码：

function randomColor(){
  return "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});
}
var myWords = [{word: "Accern Corporation", size: "1"},{word: "Access", size: "1"},{word: "Adalo", size: "4"},{word: "AffinityDesigner", size: "1"},{word: "Airtable", size: "4"},{word: "Akkio", size: "2"},{word: "Amelia", size: "2"},{word: "App Engine", size: "1"},{word: "appery.io", size: "1"},{word: "Appian", size: "8"},{word: "AppViewX.", size: "1"},{word: "ArgoDesign", size: "1"},{word: "AWS", size: "1"},{word: "BettyBloks", size: "1"},{word: "Boomi Flow", size: "2"},{word: "Bubble", size: "8"},{word: "BugHerd", size: "1"},{word: "BuildBox", size: "1"},{word: "Bumpa", size: "1"},{word: "Capgemini", size: "1"},{word: "Cardd", size: "1"},{word: "Caspio", size: "1"},{word: "Clarifai", size: "1"},{word: "Cloud", size: "1"},{word: "Coda", size: "1"},{word: "Creatio", size: "4"},{word: "Crowdbotics", size: "1"},{word: "dashdash", size: "1"},{word: "DataRobot", size: "1"},{word: "Developers", size: "1"},{word: "EditorX", size: "1"},{word: "Excel", size: "1"},{word: "Figma", size: "1"},{word: "Fogli Elettronici", size: "1"},{word: "Forrester", size: "3"},{word: "Gartner", size: "11"},{word: "Gitlab:", size: "1"},{word: "Glideapps", size: "1"},{word: "Google", size: "2"},{word: "Google AppSheet", size: "1"},{word: "GoogleAppMaker", size: "1"},{word: "googleDocs", size: "1"},{word: "Gumroad", size: "1"},{word: "Hashnode", size: "1"},{word: "Honeycode", size: "1"},{word: "Idea Link", size: "1"},{word: "IFTTT", size: "1"},{word: "Indigo.Design", size: "1"},{word: "Levity", size: "1"},{word: "Lobe", size: "1"},{word: "LowCodeAgency", size: "1"},{word: "Magic Cloud", size: "2"},{word: "MemberSpace", size: "1"},{word: "Mendix", size: "8"},{word: "Microsoft", size: "11"},{word: "Mondelez", size: "1"},{word: "NEAR", size: "1"},{word: "Netcall", size: "1"},{word: "Nintex", size: "1"},{word: "Notion", size: "1"},{word: "Obviously.ai", size: "1"},{word: "OpenAI", size: "1"},{word: "OutSystems", size: "6"},{word: "Parabola", size: "1"},{word: "Payhere", size: "1"},{word: "Pega", size: "1"},{word: "Peltarion", size: "1"},{word: "Plantanapp", size: "2"},{word: "PowerApp", size: "9"},{word: "PowerFx", size: "3"},{word: "PowerPlattform", size: "2"},{word: "Primer", size: "1"},{word: "Quick Base", size: "1"},{word: "Salesforce", size: "1"},{word: "Shopify", size: "1"},{word: "Sogeti", size: "1"},{word: "Squarespace", size: "2"},{word: "Stacker", size: "1"},{word: "Teachable Machines", size: "1"},{word: "Textile", size: "1"},{word: "ThinkwiseAutoML", size: "1"},{word: "Tidelift", size: "1"},{word: "Vantiq", size: "1"},{word: "Veritone", size: "1"},{word: "VisionX", size: "2"},{word: "VisualBasic", size: "1"},{word: "Voiceflow", size: "2"},{word: "WaveMaker", size: "1"},{word: "Webflow", size: "8"},{word: "Wix", size: "2"},{word: "Zapier", size: "6"},{word: "Zoho", size: "3"},{word: "Zvolv", size: "2"}]
    
    
var margin = {top: 10, right: 10, bottom: 10, left: 10},
                width = screen.width - margin.left - margin.right,
                height = 800 - margin.top - margin.bottom;
            
    
var svg = d3.select("#my_dataviz").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 + ")");
            
            var layout = d3.layout.cloud()
              .size([width, height])
              .words(myWords.map(function(d) { return {text: d.word, size:d.size, color:randomColor()}; }))
              .padding(5)
              .rotate(function() { return ~~(Math.random() * 2) * 90; })
              .font("Impact")
              .fontSize(function(d) { return d.size; })  
              .on("end", draw)
            layout.start();
    
            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 *10+"px" })
                    .style("fill", function(d) { console.log(d);return  d.color })
                    .attr("text-anchor", "middle")
                    .attr("font-family", "Impact")
                    .attr("transform", function(d) {
                      return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                    })
                    .text(function(d) { return d.text; });
            }

我也用这个脚本：

<script src="https://d3js.org/d3.v3.js"></script>
<script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/d3.layout.cloud.js"></script>

有什么建议吗？

Answer 1

错误是函数 draw() 中的 *10

.style("font-size",function(d) { return  d.size /**10 not here*/+"px" })

乘以正确点在 words() 中的大小

.words(myWords.map(function(d) { return {text: d.word, size:d.size *10 /*here*/, color:randomColor()}; }))

d3JS 云图：避免单词重叠

d3JS cloud chart: avoid overlapping words

charts

data-visualization

overlapping

d3.js