Announcement

Collapse
No announcement yet.

WordCloud - JavaScript/D3 - Erstes Wort aus Array horizontal zentriert ausrichten

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • WordCloud - JavaScript/D3 - Erstes Wort aus Array horizontal zentriert ausrichten

    Hallo Entwickler...
    Es geht um den WordCloud von Jason Davies, hier das Original-Beispiel:
    https://github.com/jasondavies/d3-cl...es/simple.html

    Es wurde von Lars Ebert abgeändert und inklusive Tutorial hier sehr schön erklärt:
    http://www.advitum.de/blog/2012/04/t...word-cloud-d3/ Vielen Dank Lars!

    Nun möchte ich es auch ein wenig anpassen, aber bekomme es seit Tagen nicht hin.
    Ich möchte gerne das erste Wort aus dem Array mittig zentriert haben.
    Im wesentlichen geht es "nur" um die Funktion "translate/rotate".

    Mein Problem:
    Mit der Anpassung unten wird das erste Wort zwar horizontal zentriert, aber es entsteht eine Lücke in der Cloud und wird
    teilweise von den restlichen Wörtern überlappt. Es sieht so aus als ob das Wort nicht mehr mit der Cloud zusammenhängt.
    Diese Lücke hat exakt die Dimensionen des Wortes in der Mitte und bewegt sich dann auch dynamisch mit dem Rest der Cloud.

    Warum ist das so? Ich blicke einfach nicht durch.
    Kann bitte mal jemand einen Blick draufwerfen?


    Code:
    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")
    
    
        .attr("transform", function(d, i) {
            if(i == 0){
                return "translate(" + [0, 0] + ")rotate(" + 0 + ")";      //für erstes Wort
            }else{
                return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";   //für alle anderen Wörter
            }
        })
    
    
        .text(function(d) { return d.text; });
    }

    Vielen Dank!
    Zuletzt editiert von acanthus; 28.03.2013, 15:51.

  • #2
    Schade, ist nicht wirklich viel los hier...

    Comment


    • #3
      Vielleicht liegt es auch daran, dass man sich nun nicht erst durch diverse Seiten quälen muss, dann erst ein Script downloaden muss, sich selbst ein Beispiel erstellen muss, deine Änderung dann auch noch reinpflegen um dann zu schauen woran es liegen könnte. Du kannst ja dazu beitragen, das hier mehr los ist, in dem du auf aktuelle Fragen antwortest.....
      Christian

      Comment


      • #4
        Hmm... So habe ich das noch nicht gesehen.
        Ich dachte mir das es vielleicht jemanden gibt, der dieses, oder ein ähnliches Problem bereits hatte.
        Ich werde mir mal Gedanken machen.

        Vielen Dank für Deine Antwort!

        Comment

        Working...
        X