Giter Club home page Giter Club logo

Comments (6)

sujithasj avatar sujithasj commented on May 21, 2024 6

Hi

I worked on this but still i'm getting overlapped words .Below is the Generated wordcloud
d3wordcloud

Below is my code
var color = d3.scale.linear()
.domain([0,1,2,3,4,5,6,10,15,20,100])
.range(["orange", "pink", "green", "red", "dark pink", "yellow", "pale yellow", "cyan", "orange", "blue", "brown", "#222"]);

d3.layout.cloud().size([800, 300])
        .words(frequency_list)
		.padding(1)
        .rotate(function(d) { return 0; })
		.text(function(d) { return d.text; }) 
        .fontSize(function(d) { return d.size; })
        .on("end", draw)
        .start();

function draw(words) {
    d3.select("body").append("svg")
            .attr("width", 850)
            .attr("height", 350)
            .attr("class", "wordcloud")
            .append("g")
            // without the transform, words words would get cutoff to the left and top, they would
            // appear outside of the SVG area
            .attr("transform", "translate(320,200)")
            .selectAll("text")
            .data(words)
            .enter().append("text")
            .style("font-size", function(d) { return d.size+10+ "px"; })
            .style("fill", function(d, i) { return color(i); })
            .attr("transform", function(d) {
                return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
            })
            .text(function(d) { return d.text; })
			//.on("mousedown",console.log(this));
			.on("click", function(d) {	mouseoverlogic(d.text);});
}

can u plz help me out

from d3-cloud.

jasondavies avatar jasondavies commented on May 21, 2024 1

You forgot to specify the appropriate text accessor function for your data, e.g.

.text(function(d) { return d.word; })

from d3-cloud.

anbrun avatar anbrun commented on May 21, 2024

Thanks for the quick reply. However, my code contains the line you quoted (at the end of the "draw" function). Do I have to specify it somewhere else, too?

from d3-cloud.

jasondavies avatar jasondavies commented on May 21, 2024

Yes, you need to configure your layout with the text accessor function: d3.layout.cloud().text(…).

from d3-cloud.

anbrun avatar anbrun commented on May 21, 2024

Oh, okay. Yes, it works fine now. Thank you!

from d3-cloud.

sujithasj avatar sujithasj commented on May 21, 2024

words are overlapping when i form wordcloud. which change i need to do in code can u please tell me. Its very important to me

from d3-cloud.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.