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?
Vielen Dank!
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!
Comment