如何使用 d3.js 制作静态 Wordcloud？
How can I make static Wordcloud using d3.js?
大家好！
我正在使用 d3.js 开发 wordcloud。
我正在使用以下示例 This example is really great btw!
我唯一的问题是每次重新加载页面时，词云都会发生变化（词会获得新的旋转角度和新位置）。
我解决这个问题的方法是让 rotate() 函数始终 return 或者 0 或 90。
但我似乎找不到实现此目的的好方法。我考虑过使用全局范围变量数组：
const x = [0,90]
...
d3.layout.cloud().size([width, height])
.timeInterval(20)
.words(word_entries)
.fontSize(function(d) { return xScale(+d.value); })
.text(function(d) { return d.key; })
.rotate(function() { return x[somePosition%2]; })
...
但是变量somePosition并不真正存在。我应该创建一个全局变量 somePosition 并在回调中访问它并在每次使用它时递增该变量吗？这样做安全吗？
我是否以正确的方式解决这个问题？
如何制作类似于下面的功能？ （我觉得这是正确的做法）：
var fill = d3.scale.category20();
是否有另一种方法来解决这个问题（更优雅一些）？
我感谢所有意见和解决方案。
d3.cloud 使用 Math.random().
随机放置、旋转...单词
它确实可以让您使用 rotate() 功能为单词指定您自己的角度，但它没有提供任何东西来固定云中单词的位置。
绕过它的想法是简单地修复生成器选择的值。这样，相同的单词将始终以相同的方式放置。
为了修复随机生成器选择的值，我们必须seed它。
由于 javascript Math.random 不采用种子参数，我已经包含了 seedrandom 库（但还有其他方法可以在 javascript) 我只是在脚本的顶部设置了种子：
Math.seedrandom('hello.');
给出：
Math.seedrandom('hello.');
var text_string = "Of course that’s your contention. You’re a first year grad student. You just got finished readin’ some Marxian historian, Pete Garrison probably. You’re gonna be convinced of that ’til next month when you get to James Lemon and then you’re gonna be talkin’ about how the economies of Virginia and Pennsylvania were entrepreneurial and capitalist way back in 1740. That’s gonna last until next year. You’re gonna be in here regurgitating Gordon Wood, talkin’ about, you know, the Pre-Revolutionary utopia and the capital-forming effects of military mobilization… ‘Wood drastically underestimates the impact of social distinctions predicated upon wealth, especially inherited wealth.’ You got that from Vickers, Work in Essex County, page 98, right? Yeah, I read that, too. Were you gonna plagiarize the whole thing for us? Do you have any thoughts of your own on this matter? Or do you, is that your thing? You come into a bar. You read some obscure passage and then pretend, you pawn it off as your own, as your own idea just to impress some girls and embarrass my friend? See, the sad thing about a guy like you is in 50 years, you’re gonna start doin’ some thinkin’ on your own and you’re gonna come up with the fact that there are two certainties in life. One: don’t do that. And two: you dropped a hundred and fifty grand on a fuckin’ education you coulda got for a dollar fifty in late charges at the public library.";
drawWordCloud(text_string);
function drawWordCloud(text_string){
var common = "poop,i,me,my,myself,we,us,our,ours,ourselves,you,your,yours,yourself,yourselves,he,him,his,himself,she,her,hers,herself,it,its,itself,they,them,their,theirs,themselves,what,which,who,whom,whose,this,that,these,those,am,is,are,was,were,be,been,being,have,has,had,having,do,does,did,doing,will,would,should,can,could,ought,i'm,you're,he's,she's,it's,we're,they're,i've,you've,we've,they've,i'd,you'd,he'd,she'd,we'd,they'd,i'll,you'll,he'll,she'll,we'll,they'll,isn't,aren't,wasn't,weren't,hasn't,haven't,hadn't,doesn't,don't,didn't,won't,wouldn't,shan't,shouldn't,can't,cannot,couldn't,mustn't,let's,that's,who's,what's,here's,there's,when's,where's,why's,how's,a,an,the,and,but,if,or,because,as,until,while,of,at,by,for,with,about,against,between,into,through,during,before,after,above,below,to,from,up,upon,down,in,out,on,off,over,under,again,further,then,once,here,there,when,where,why,how,all,any,both,each,few,more,most,other,some,such,no,nor,not,only,own,same,so,than,too,very,say,says,said,shall";
var word_count = {};
var words = text_string.split(/[ '\-\(\)\*":;\[\]|{},.!?]+/);
if (words.length == 1){
word_count[words[0]] = 1;
} else {
words.forEach(function(word){
var word = word.toLowerCase();
if (word != "" && common.indexOf(word)==-1 && word.length>1){
if (word_count[word]){
word_count[word]++;
} else {
word_count[word] = 1;
}
}
})
}
var svg_location = "#chart";
var width = 1000;
var height = 600;
var fill = d3.scale.category20();
var word_entries = d3.entries(word_count);
var xScale = d3.scale.linear()
.domain([0, d3.max(word_entries, function(d) {
return d.value;
})
])
.range([10,100]);
d3.layout.cloud().size([width, height])
.timeInterval(20)
.words(word_entries)
.fontSize(function(d) { return xScale(+d.value); })
.text(function(d) { return d.key; })
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.font("Impact")
.on("end", draw)
.start();
function draw(words) {
d3.select(svg_location).append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + [width >> 1, height >> 1] + ")")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return xScale(d.value) + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.key; });
}
d3.layout.cloud().stop();
}
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js"/></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.3/seedrandom.min.js">
<script src="cloud.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
大家好！
我正在使用 d3.js 开发 wordcloud。
我正在使用以下示例 This example is really great btw!
我唯一的问题是每次重新加载页面时，词云都会发生变化（词会获得新的旋转角度和新位置）。
我解决这个问题的方法是让 rotate() 函数始终 return 或者 0 或 90。
但我似乎找不到实现此目的的好方法。我考虑过使用全局范围变量数组：
const x = [0,90]
...
d3.layout.cloud().size([width, height])
.timeInterval(20)
.words(word_entries)
.fontSize(function(d) { return xScale(+d.value); })
.text(function(d) { return d.key; })
.rotate(function() { return x[somePosition%2]; })
...
但是变量somePosition并不真正存在。我应该创建一个全局变量 somePosition 并在回调中访问它并在每次使用它时递增该变量吗？这样做安全吗？
我是否以正确的方式解决这个问题？
如何制作类似于下面的功能？ （我觉得这是正确的做法）：
var fill = d3.scale.category20();
是否有另一种方法来解决这个问题（更优雅一些）？
我感谢所有意见和解决方案。
d3.cloud 使用 Math.random().
它确实可以让您使用 rotate() 功能为单词指定您自己的角度，但它没有提供任何东西来固定云中单词的位置。
绕过它的想法是简单地修复生成器选择的值。这样，相同的单词将始终以相同的方式放置。
为了修复随机生成器选择的值，我们必须seed它。
由于 javascript Math.random 不采用种子参数，我已经包含了 seedrandom 库（但还有其他方法可以在 javascript) 我只是在脚本的顶部设置了种子：
Math.seedrandom('hello.');
给出：
Math.seedrandom('hello.');
var text_string = "Of course that’s your contention. You’re a first year grad student. You just got finished readin’ some Marxian historian, Pete Garrison probably. You’re gonna be convinced of that ’til next month when you get to James Lemon and then you’re gonna be talkin’ about how the economies of Virginia and Pennsylvania were entrepreneurial and capitalist way back in 1740. That’s gonna last until next year. You’re gonna be in here regurgitating Gordon Wood, talkin’ about, you know, the Pre-Revolutionary utopia and the capital-forming effects of military mobilization… ‘Wood drastically underestimates the impact of social distinctions predicated upon wealth, especially inherited wealth.’ You got that from Vickers, Work in Essex County, page 98, right? Yeah, I read that, too. Were you gonna plagiarize the whole thing for us? Do you have any thoughts of your own on this matter? Or do you, is that your thing? You come into a bar. You read some obscure passage and then pretend, you pawn it off as your own, as your own idea just to impress some girls and embarrass my friend? See, the sad thing about a guy like you is in 50 years, you’re gonna start doin’ some thinkin’ on your own and you’re gonna come up with the fact that there are two certainties in life. One: don’t do that. And two: you dropped a hundred and fifty grand on a fuckin’ education you coulda got for a dollar fifty in late charges at the public library.";
drawWordCloud(text_string);
function drawWordCloud(text_string){
var common = "poop,i,me,my,myself,we,us,our,ours,ourselves,you,your,yours,yourself,yourselves,he,him,his,himself,she,her,hers,herself,it,its,itself,they,them,their,theirs,themselves,what,which,who,whom,whose,this,that,these,those,am,is,are,was,were,be,been,being,have,has,had,having,do,does,did,doing,will,would,should,can,could,ought,i'm,you're,he's,she's,it's,we're,they're,i've,you've,we've,they've,i'd,you'd,he'd,she'd,we'd,they'd,i'll,you'll,he'll,she'll,we'll,they'll,isn't,aren't,wasn't,weren't,hasn't,haven't,hadn't,doesn't,don't,didn't,won't,wouldn't,shan't,shouldn't,can't,cannot,couldn't,mustn't,let's,that's,who's,what's,here's,there's,when's,where's,why's,how's,a,an,the,and,but,if,or,because,as,until,while,of,at,by,for,with,about,against,between,into,through,during,before,after,above,below,to,from,up,upon,down,in,out,on,off,over,under,again,further,then,once,here,there,when,where,why,how,all,any,both,each,few,more,most,other,some,such,no,nor,not,only,own,same,so,than,too,very,say,says,said,shall";
var word_count = {};
var words = text_string.split(/[ '\-\(\)\*":;\[\]|{},.!?]+/);
if (words.length == 1){
word_count[words[0]] = 1;
} else {
words.forEach(function(word){
var word = word.toLowerCase();
if (word != "" && common.indexOf(word)==-1 && word.length>1){
if (word_count[word]){
word_count[word]++;
} else {
word_count[word] = 1;
}
}
})
}
var svg_location = "#chart";
var width = 1000;
var height = 600;
var fill = d3.scale.category20();
var word_entries = d3.entries(word_count);
var xScale = d3.scale.linear()
.domain([0, d3.max(word_entries, function(d) {
return d.value;
})
])
.range([10,100]);
d3.layout.cloud().size([width, height])
.timeInterval(20)
.words(word_entries)
.fontSize(function(d) { return xScale(+d.value); })
.text(function(d) { return d.key; })
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.font("Impact")
.on("end", draw)
.start();
function draw(words) {
d3.select(svg_location).append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + [width >> 1, height >> 1] + ")")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return xScale(d.value) + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.key; });
}
d3.layout.cloud().stop();
}
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js"/></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.3/seedrandom.min.js">
<script src="cloud.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>