Beim Laden der D3 v4.8- und Word-Cloud-Layout-Komponente ( Ссылка ) mit dem RequireJS treten Probleme auf . Während sowohl D3.js als auch d3.layout.cloud.js in den Browser heruntergeladen werden, wird eine Ausnahme ausgelöst, die darauf hinweist, dass die Datei d3.layout.cloud keine Funktion ist.
So konfiguriere ich das RequireJS:
%Vor%Die Codezeile, die eine Ausnahme auslöst, ist d3.layout.cloud (). size ([width, height]) und kann in der folgenden Funktion gefunden werden:
%Vor% Die neueste Version von d3-cloud hängt nur vom d3-Versand ab, daher sollte es mit jeder Version von D3 funktionieren. Ich denke, das Problem hier ist, dass Sie RequireJS ( AMD ) verwenden, um auf die d3.layout.cloud.js -Datei zu verweisen, aber Sie ' Verwenden Sie nicht RequireJS, um die Bibliothek zu verwenden (in Ihrem Beispiel als cloud konfiguriert). Siehe das folgende Beispiel :
Wenn Sie den CommonJS-Stil require(…) verwenden möchten, können Sie dies auch mit RequireJS verwenden, wenn Sie die entsprechende define(…) -Syntax verwenden, wie in diesem schnelles Beispiel .
Obwohl d3-cloud selbst sowohl mit D3 V3 als auch mit V4 kompatibel ist, werden die meisten Beispiele nicht gefunden, und Ihr aktueller Code ist nicht, er kann nur mit V3 funktionieren.
Damit es mit V4 funktioniert, müssen Sie alle Referenzen auf d3.scale ersetzen.
Zum Beispiel wird d3.scale.category20() zu d3.scaleOrdinal(d3.schemeCategory20) .
Für ein kleines lauffähiges Beispiel, das mit beiden kompatibel ist, siehe Fiddle # 1 . Es verwendet RequireJS, um d3, d3-cloud und jQuery zu laden. Versuchen Sie, die D3-Version in Require-Konfiguration am Anfang von JS-Teil zu ändern.
Lassen Sie uns jetzt auf V3 eingehen, da Ihr Code davon abhängt. Es gibt noch ein paar Probleme:
Sie müssen Objekte für d3 & amp; d3cloud & amp; jQuery, die über einen Aufruf von require erhalten werden. Und mit RequireJS ist dies asynchron (weil es die JS-Skripte programmatisch und in einem Browser holen muss, der nur asynchron durchgeführt werden kann). Sie fügen Ihren Code in eine Callback-Funktion ein (weitere Informationen finden Sie unter RequireJS-Dokumentation):
[Bearbeiten: Siehe Jasons Antwort für alternative Syntax. ]
%Vor% In diesem Kontext (und Versionen) ist die d3 cloud main-Funktion nicht verfügbar unter d3.layout.cloud() , also müssen Sie diese durch d3cloud() ersetzen, vorausgesetzt, dass der Name des Arguments als Callback an require übergeben wurde.
Sie müssen sicherstellen, dass Sie nie Breite oder Höhe von 0 bis d3cloud.size([width, height]) übergeben, oder es wird eine Endlosschleife eingegeben. Leider kann es leicht passieren, wenn Sie $(selector).height() verwenden, abhängig vom Inhalt Ihrer Seite und möglichen "Unfällen". Ich empfehle zum Beispiel var height = $(selector).height() || 10; .
Kein Programmierproblem, aber die Funktion, die Sie an .rotate() übergeben, stammt aus einem Beispiel, und vielleicht möchten Sie das ändern: Es gibt nur 2 mögliche Werte, 0 oder 90, ich finde das eintönig, das voreingestellte ist hübscher. Also habe ich die Zeile im folgenden Beispiel komplett entfernt. Vielleicht möchtest du es zurück haben, füge einfach deine .rotate(...) -Zeile hinzu.
Fiddle # 2 : ein vollständiges funktionierendes Beispiel basierend auf Ihrem Code.