繁体   English   中英

d3 wordcloud 字体大小不适应

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM