[英]d3 wordcloud fontsize doesn't adapt
我的 d3.wordcloud 文檔的字體大小不受 wordlist.tsv 文件中指定的計數的影響。 但是,從我對代碼的理解來看,它應該是。
<!DOCTYPE html>
<html>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="build/d3.layout.cloud.js"></script>
<head>
<title>Word Cloud Example</title>
</head>
<body>
</body>
<script>
var width = 500; heigth = 500;
var wordscale = d3.scale.linear().range([10,60]);
var fill = d3.scale.category20();
d3.tsv("wordlist.tsv",function(data){
var wordlist2 = data
.filter(function(d){ return +d.count > 10;})
.map(function(d){ return{text: d.word +" ("+ d.count+")", fsize: +d.count};})
.sort(function(a,b){return d3.descending(a.fsize,b.fsize);})
.slice(0,100);
wordscale.domain([0,d3.max(wordlist2, function(d) {return d.fsize;})]);
d3.layout.cloud()
.size([width, heigth])
.padding(1)
.words(wordlist2)
.rotate(0)
.fontSize(function(d) { return wordscale(+d.fsize); })
.on("end", draw) //afblijven
.start(); //start algoritme
});
function draw(words) {
d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", heigth)
.attr("class", "wordcloud")
.append("g")
.attr("transform", "translate("+width/2+","+heigth/2+")")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { d.fsize + "px"; })
.style("fill", function(d, i) { return fill(i); })
.attr("transform", function(d) {return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";})
.text(function(d) { return d.text; });
}
</script>
</html>
從我理解的以下代碼行:
.fontSize(function(d) { return wordscale(+d.fsize); })
應該使代碼適應代碼中前面定義的比例,但遺憾的是它沒有並且所有單詞的大小都相同。 盡管 .tsv 文件中每個單詞的計數參數不同
有什么建議嗎?
解決了,我忘記了以下代碼行中的 return 語句
.style("font-size", function(d) { d.fsize + "px"; })
這應該是:
.style("font-size", function(d) {return d.fsize + "px"; })
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.