Center the main Word from D3-WordCloud horizontally

I have the following WordCloud.
The original Code is from Jason Davies D3-JavaScript-WordCloud Example.
https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html

Most of the Code below is from this really helpfull tutorial (in German):
http://www.advitum.de/blog/2012/04/tagcloud-mit-php-und-javascript-erstellen-word-cloud-d3/
Thank You Lars Ebert!

  • how to make horizontal elements expand to cover available space?
  • Cross browser div center alignment using CSS
  • using Raphael's-library for drawing left aligned text
  • CKEditor align images instead of float
  • Vertical and horizontal align all content and elements inside a div
  • Aligning DIVs horizontally and vertically
  • EDIT: Now I have learned a little bit more. I have cleared nonsensical code.

    My goal is to center the first word from array horizontally.

    The first word is now centered horizontally, but now there is a gap in the Cloud.
    Just at the x,y point where the word would be without positioning.

    My new question is: How do I remove this gap?

    Thank You.

    var wordcloud, size = [800, 800]; //Cloud Size
    var fillColor = d3.scale.category20b();
    
    function loaded() {
        d3.layout.cloud()
            .size(size) 
            .words(words)
            .font("Impact")
            .fontSize(function(d) { return d.size;})
            .rotate(function() { return ~~(Math.random() * 2) * 90; })
            .on("end", draw)
            .start();       
    }
    
    function draw(words) {
        wordcloud = d3.select("body")
            .append("svg")
            .attr("width", size[0])
            .attr("height", size[1])
            .append("g")
            .attr("transform", "translate(" + (size[0]/2) + "," + (size[1]/2) + ")");
        wordcloud.selectAll("text")
            .data(words)
            .enter()
            .append("text")
            .style("font-size", function(d) { return d.size + "px"; })
            .style("fill", function(d) { return fillColor(d.text.toLowerCase()); })
            .attr("text-anchor", "middle")
    
         //Edit
        .attr("transform", function(d, i) {
            if(i == 0){
                return "translate(" + [0, 0] + ")rotate(" + 0 + ")";    //handle first element
            }else{
                return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; //handle the rest
            }
        })
        //--------------
    
        .text(function(d) { return d.text; });
    }
    

  • how to make horizontal elements expand to cover available space?
  • iconCls in a button text alignment - EXTJS
  • CKEditor align images instead of float
  • using Raphael's-library for drawing left aligned text
  • Aligning DIVs horizontally and vertically
  • Vertical and horizontal align all content and elements inside a div
  • One Solution collect form web for “Center the main Word from D3-WordCloud horizontally”

    Use a negative margin equal to one of the size calculations:

     wordcloud.selectAll("text")
         ...
         ...
         ...
         .style("margin-left", function(d) {return d.size + "px"})