CODEWITHSUNDEEP
javascriptd3.js
Walksalong
Walksalong

Reputation: 191

d3 word cloud - words out of bounds

I'm using d3 word cloud (https://github.com/jasondavies/d3-cloud) and I can't seem to keep the words within the boundaries. About every 3rd or 4th load it will cut off a word. 

d3.layout.cloud()
        .size([800, 300])
        .words(words)
        .overflow(true)
        .rotate(0)
        .padding(6)
        .fontSize(function(d) { return d.size; })
        .on("end", draw)
        .start();

function draw(words) {
    d3.select("#d3").append("svg")
            .attr("width", 800)
            .attr("height", 300)
            .attr("class", "wordcloud")
            .append("g")
        // without the transform, words words would get cutoff to the left and top, they would
        // appear outside of the SVG area
            .attr("transform", "translate(370,155)")
            .selectAll("text")
            .data(words)
            .enter()
            .append("text")
            .style("-webkit-text-stroke-width", "1px")
            .style("-webkit-text-stroke-color", "black")
            .style("font-size", function(d) { return d.size + "px"; })
            .style("fill", function(d, i) { return color(i); })
            .attr("text-anchor", "middle")
            .attr("transform", function(d) {
                return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
            })
            .text(function(d) { return d.text; })
            .on("click", function (d, i){
             window.open(d.url, "_self");
    });
}

enter image description here

Upvotes: 1

Views: 1849

Answers (2)

user2352657
user2352657

Reputation: 21

Setting your text-anchor attribute to start and using the Math.abs() on your d.x value within the translate method will help.

You'd be left with the below as your draw function:

function draw(words) {
d3.select("#d3").append("svg")
        .attr("width", 800)
        .attr("height", 300)
        .attr("class", "wordcloud")
        .append("g")
    // without the transform, words words would get cutoff to the left and top, they would
    // appear outside of the SVG area
        .attr("transform", "translate(370,155)")
        .selectAll("text")
        .data(words)
        .enter()
        .append("text")
        .style("-webkit-text-stroke-width", "1px")
        .style("-webkit-text-stroke-color", "black")
        .style("font-size", function(d) { return d.size + "px"; })
        .style("fill", function(d, i) { return color(i); })
        .attr("text-anchor", "start")
        .attr("transform", function(d) {
            return "translate(" + [Math.abs(d.x), d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function(d) { return d.text; })
        .on("click", function (d, i){
         window.open(d.url, "_self");
});

}

Upvotes: 1

Aditeya Pandey
Aditeya Pandey

Reputation: 671

You will have to reduce the word font size, to ensure the words fit in the svg or increase the size of svg.

Upvotes: 0

Related Questions