Question

来自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();

现在我将jCount的原始值用作textsize。假设jCount可能会有所不同，我想设置一个大小范围（最小10px到50px）。

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

然后我改变了

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

我将“size：s”部分更改为许多其他可能猜到的形式，但它不起作用。我仍然熟悉d3.js / jquery / svg语法，所以现在我无法弄清楚如何设置它。请帮忙！

Answer 1

s是一个将域映射到范围的函数。所以将行改为

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

您还需要在.domain的定义中交换.range和s（并将逗号更改为点） - .domain设置输入范围和{ {1}}输出范围。

d3.js标签云：设置文本大小范围

1 个答案: