我正在使用d3创建一个wordcloud,但是我的单词有时会掉线并被截断。如何将单词集中在一起并确保始终显示所有单词?
我试图更改字体大小和相关属性。
let color = d3.scaleLinear()
.domain([0,1,2,3,4,5,6,10,15,20,100])
.range(["#ddd", "#ccc", "#bbb", "#aaa", "#999", "#888", "#777", "#666", "#555", "#444", "#333", "#222"]);
const w = 400,
h = 350
function draw(schoolData){
d3.select(".modal-body")
.insert("svg", "#dog")
.attr("id", "wordcloud")
.attr("width", w)
.attr("height", h)
.append("g")
.attr("transform", "translate(" + w/2 + "," + h/2 + ")")
.selectAll("text")
.data(schoolData)
.enter()
.append("text")
.attr("text-anchor", "middle")
.attr("transform", (d, i) => {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")" })
.style("fill", (d, i) => {
if (d.current){
return "#002664"
} else {
return color(i)
}
})
.style("font-size", function(d) {
debugger
if (d.acceptanceRate === null){
return "6px"
} else {
return d.acceptanceRate/2 + "px";
}
})
.text( d => { return d.schoolName })
}
d3.layout.cloud()
.size([w, h])
.words(schoolData)
.padding(true)
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.fontSize(d => { return d.acceptanceRate })
.on("end", draw)
.start()