d3 wordcloud临界值/并非总是适合边界

时间:2019-10-23 01:28:28

标签: javascript d3.js transform word-cloud

我正在使用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()

希望单词在中间聚在一起,而不会被截断/掉入边界。enter image description here

0 个答案:

没有答案