Words overlap in d3-cloud-CodePudding

I'm trying to use d3 and d3-cloud to display a keyword cloud. It works, but my only problem is that the words overlap, And I dont understand why. I think it comes from the fontSize, but I can't find what exactly. screen here

Below are my different methods :

    private _populate(keyword: any) {
        const dataset = kw.map(function (d: any) { return { text: d.text, size: d.value }; });
        console.log(dataset);

        d3.layout.cloud()
            .size([this._width, this._height])
            .words(dataset)
            .padding(1)
            .rotate(0)
            .fontSize((d: any) => d.size / 100)
            .on('end', () => {
                this._drawWordCloud(dataset);
            })
            .start();
    }

    private _drawWordCloud(words: any) {
        this._svg
            .append("g")
                .attr("transform", "translate("   this._width / 2   ","   this._height / 2   ")")
                .selectAll("text")
                .data(words)
                .enter().append("text")
                    .style("font-size", (d: any) => d.size   "px")
                    .style("fill", "#69b3a2")
                    .style("font-family", "Impact")
                    .attr("text-anchor", "middle")
                    .attr("transform", (d: any) => "translate("   [d.x, d.y]   ")rotate("   d.rotate   ")")
                    .text((d: any) => d.text);
    }

.fontSize((d: any) => d.size / 100) because my values are very high (~ 10000).

Someone can help me ? The various solutions (very few) that I have found do not work.

Thanks !

CodePudding user response：

I finally found the solution. You have to add the font you want to use in the first method "_populate". In my case :

.font("Impact")

And we don't change the line in the second method :

.style("font-family", "Impact")

That's all ! I hope it can help other people