d3JS cloud chart: avoid overlapping words-CodePudding

i'm new to d3.js and in stackoverflow i cannot find the solution to my problem (i tryed all the answares)so I will try writing. the code below is working but i want to avoid the overlapping of the words and i don't know where i'm wrong this is my code:

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; });
            }

I also use this scripts:

<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>

any suggestion?

CodePudding user response：

the error was the *10 inside function draw()

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

to multiply the size the correct point is inside words()

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