Comments (6)
Hi
I worked on this but still i'm getting overlapped words .Below is the Generated wordcloud
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.
You forgot to specify the appropriate text accessor function for your data, e.g.
.text(function(d) { return d.word; })
from d3-cloud.
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.
Yes, you need to configure your layout with the text accessor function: d3.layout.cloud().text(…)
.
from d3-cloud.
Oh, okay. Yes, it works fine now. Thank you!
from d3-cloud.
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)
- unable to create word cloud inside panel class angularjs html HOT 1
- Exclude user specific words HOT 1
- D3 word cloud cannot show all words HOT 4
- Delay in loading react-wordcloud with fontSizes in options prop HOT 2
- feature: blink words to load more? HOT 2
- Generate the same word cloud for the same data HOT 1
- Allow CSV import HOT 2
- how to use it? HOT 4
- Link / Action for each word HOT 3
- Lot of space left unused HOT 2
- Not working anymore with recent versions of d3! HOT 1
- Need some instruction on how to get started HOT 1
- is there any way to port wordcloud svg to canvas. HOT 1
- Unreadable under D3 V7 HOT 4
- bug: fontSize not working on firefox
- Using d3 from Latex HOT 2
- How to fit chart to size given HOT 1
- Migrate to esm
- Allow changing the dominant baseline HOT 1
- Setting custom style on cloud throws an exception HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from d3-cloud.