d3 wordcloud cutoff / не всегда укладывается в границы - PullRequest
Новая
       24

d3 wordcloud cutoff / не всегда укладывается в границы

0 голосов
/ 23 октября 2019

Я использую d3 для создания облака слов, однако мои слова иногда выходят за границы и обрезаются. Как я могу собрать слова вместе в центре и убедиться, что все слова всегда отображаются?

Я пытался изменить размер шрифта и связанные с ним атрибуты. 

    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

...