CODEWITHSUNDEEP
d3.js
clerksx
clerksx

Reputation: 640

d3.js tag cloud: setting text size range

A further question from d3.js Tag Cloud size from a Json/array?

var jWord = ["abc","def","ghi","jkl"];
var jCount = [2, 5, 3, 8];

  d3.layout.cloud().size([650, 140])
      .words(d3.zip(jWord, jCount).map(function(d) {
        return {text: d[0], size: d[1]};
      }))
      .rotate(function() { return 0; })
      //.rotate(function() { return ~~(Math.random() * 2) * 90; })
      .fontSize(function(d) { return d.size; })
      .on("end", draw)
      .start();

Now I use the original values of jCount as textsize. Assuming the jCount may vary, I'd like to set a size range (min 10px to 50px). 

var maxCount = d3.max(jCount);
var s = d3.scale.linear().domain([10,50]),range([0, maxCount)]);

Then I changed 

  .words(d3.zip(jWord, jCount).map(function(d) {
    return {text: d[0], size: s};
  }))

I changed "size:s" part into many other possibly guessed forms, but it doesn't work. I'm still getting familiar with d3.js/jquery/svg syntax, so for now i can't really figure it out how to set this. Please help!

Upvotes: 1

Views: 3488

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109242

s is a function which maps domain to range. So change the line to

.words(d3.zip(jWord, jCount).map(function(d) {
  return {text: d[0], size: s(d[1]) };
}))

You also need to swap .domain and .range in the definition of s (and change the comma to a dot) -- .domain sets the input range and .range the output range.

Upvotes: 3

Related Questions