Javascript 将D3WordCloud中的主单词水平居中
我有以下WordCloud。 原始代码来自Jason Davies D3 JavaScript WordCloud示例。 下面的大部分代码都来自这个非常有用的教程(德语): 谢谢你,拉尔斯·埃伯特 编辑:现在我学到了更多。我已经清除了无意义的代码 我的目标是将数组中的第一个单词水平居中。 第一个单词现在水平居中,但现在云中有一个间隙。 就在x,y点上,单词没有定位 我的新问题是:如何消除这一差距? 多谢各位Javascript 将D3WordCloud中的主单词水平居中,javascript,d3.js,alignment,center,words,Javascript,D3.js,Alignment,Center,Words,我有以下WordCloud。 原始代码来自Jason Davies D3 JavaScript WordCloud示例。 下面的大部分代码都来自这个非常有用的教程(德语): 谢谢你,拉尔斯·埃伯特 编辑:现在我学到了更多。我已经清除了无意义的代码 我的目标是将数组中的第一个单词水平居中。 第一个单词现在水平居中,但现在云中有一个间隙。 就在x,y点上,单词没有定位 我的新问题是:如何消除这一差距? 多谢各位 var wordcloud, size = [800, 800]; //Cloud S
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"})
你能,通过任何机会,发布完整的html、css和js组合吗?