How to make the cloud not square

[vrghost242]

First of all, d3-cloud is amazing. Just putting it out there.

So got most things working pretty easily, even made it into an angular directive, and it works amazing. But have two questions about placement. First one, my clouds come out square (I.E. they draw at 90 degree angles). I have checked and they do generate rotate.

Second, can I control in what order they words are drawn, like biggest first or something to get all the main ones in the center.

Below is my version (OK, my version is a stretch, what I ended up with after stealing on the internet:) ) if anyone wants to test it or just need it as a angular directive and don't mind that it only prints in 90 degree angles:)

To run it, just add the directive to your angular app. Then call it with <word-cloud ng-model=[word array]> The array is in the format of [{text: "Word", size: 10},....... ]

I thought it may be connected to canvas module, but having issues installing canvas (trying to test it via npm, but not certain how to use it as it SEEMS to have software requirements, which would be tricky as the thing is generated on the client side)

**[Insert app name] **.directive('wordCloud', function(){
    function link(scope,element, attr, ngModel){

        ngModel.$render =  function()  {
            console.log("ngRender got called " + ngModel.$modelValue );
            var margin = {top: 20, right: 120, bottom: 20, left: 120},
                width = 400 - margin.right - margin.left,
                height = 400 - margin.top - margin.bottom;
            var cloud = d3.layout.cloud()
                .words(ngModel.$modelValue.map(function(d) { return {text: d.text, size: d.size};
                }))
                .size([height, width])
                .padding(5)
                .rotate(function() {return ~~(Math.random() *2) *90 ; })
                .font("Impact")
                .fontSize(function(d) {return d.size})
                .on("end", draw)
                .spiral("archimedean")
                //.canvas(function() { return document.createElement("canvas"); })

            cloud.start();

            function draw(words) {
                d3.select(element[0]).append("svg")
                    .attr("width", cloud.size()[0])
                    .attr("height", cloud.size()[1])
                    .append("g")
                    .attr("transform", "translate(" + cloud.size()[0] / 2 + "," + cloud.size()[1] / 2 + ")")
                    .selectAll("text")
                    .data(words)
                    .enter().append("text")
                    .style("font-size", function(d) { return d.size + "px"; })
                    .style("font-family", "Impact")
                    .style("fill", "white")
                    .attr("text-anchor", "middle")
                    .attr("transform", function(d) {
                        console.log("Will rotate to " + d.x + " and " + d.y)
                        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                    })
                    .text(function(d) { return d.text; });
            }

        } ;

    };
    return {
        link: link,
        require: 'ngModel',
        scope: { words: '='},
        restrict: 'E'

    }
});