作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有以下 WordCloud。原始代码来自 Jason Davies D3-JavaScript-WordCloud Example。 https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html
下面的大部分代码都来自这个非常有用的教程(德语): http://www.advitum.de/blog/2012/04/tagcloud-mit-php-und-javascript-erstellen-word-cloud-d3/谢谢拉尔斯艾伯特!
编辑:现在我学到了更多。我已经清除了无意义的代码。
我的目标是将数组中的第一个单词水平居中。
第一个词现在水平居中,但现在云中有一个缺口。就在单词没有定位的 x,y 点。
我的新问题是:如何消除这个差距?
谢谢。
var wordcloud, size = [800, 800]; //Cloud Size
var fillColor = d3.scale.category20b();
function loaded() {
d3.layout.cloud()
.size(size)
.words(words)
.font("Impact")
.fontSize(function(d) { return d.size;})
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.on("end", draw)
.start();
}
function draw(words) {
wordcloud = d3.select("body")
.append("svg")
.attr("width", size[0])
.attr("height", size[1])
.append("g")
.attr("transform", "translate(" + (size[0]/2) + "," + (size[1]/2) + ")");
wordcloud.selectAll("text")
.data(words)
.enter()
.append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("fill", function(d) { return fillColor(d.text.toLowerCase()); })
.attr("text-anchor", "middle")
//Edit
.attr("transform", function(d, i) {
if(i == 0){
return "translate(" + [0, 0] + ")rotate(" + 0 + ")"; //handle first element
}else{
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; //handle the rest
}
})
//--------------
.text(function(d) { return d.text; });
}
最佳答案
使用等于尺寸计算之一的负边距:
wordcloud.selectAll("text")
...
...
...
.style("margin-left", function(d) {return d.size + "px"})
关于javascript - 将 D3-WordCloud 中的主词水平居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15612107/
我是一名优秀的程序员,十分优秀!