Utilisation du plugin D3.js


#1

Bonjour à tous,

J’ai découvert TW il y a quelques moi et je prends beaucoup de plaisir à l’utiliser, et même et programmer quelques fonctions en Wikitext (très laborieusement… je n’ai rien programmé depuis 20 ans).
J’ai quelques idées de développement qui tireraient avantage du plugin D3.js… Maisje n’arrive rien en tirer (a part des JavaScript error)… j’ai beaucoup de mal à décrypter les widgets D3.js fournis

Pour commencer j’essaye de créer un motif ultra simple (genre un rond) sous D3.js et à intégrer ça dans TW… mais rien ne marche.
Par exemple je ne comprends rien aux méthodes execute, render, refresh qui ce trouvent dans ces widgets.

Est ce que quelqu’un pourrait m’aider sur le sujet en me donnant un code plus simple que ceux qui composent les exemples barWidget.js ou CloudWidget.js, afin d’apprendre et comprendre les mécanismes.

Merci beaucoup


#2

Adresse du wiki de référence: https://tiddlywiki.com/plugins/tiddlywiki/d3/, pour savoir de quoi l’on parle.


#3

Oui effectivement… c’est mieux de préciser.

Bon j’avance un peu dans la compréhension de l’utilisation de ce plugin, j’arrive à faire quelques trucs.

Par contre je me suis rendu compte que la version de D3 qui est incluse dans ce plugin est la v3, alors quelle version officielle actuelle est la V4, et mine de rien il y a des syntaxes d’instruction qui changent.
J’aimerais adapter des modèles de D3 V4… et ça rend la tâche compliquée.

J’ai du mal à me rendre compte la travail que représente l’adaptation du plugin D3 pour le passer en V4 (j’en suis personnellement incapable…)
Comment faire pour obtenir de l’aide sur le sujet ?


#4

J’ai trouvé la solution pour mettre à jour la version du plugin D3.js (qui est en V3 dans le plugin officiel alors que la V5 vient de sortir)
Ceci grace à un “collègue” sur le forum TW anglais… je la partage donc pour ceux qui seraient intéressés, en fait c’est simple:

Il suffit de corriger le fichier : $:/plugins/tiddlywiki/d3/d3.js

Il n’y a pas de risque de perdre l’original, si on veut le retrouver, il suffit de supprimer le fichier modifié.

Donc, il faut commencer le fichier par

var d3;if($tw.browser){

et le terminer par

}
exports.d3 = d3;

et entre les 2 il suffit de coller le contenu du fichier d3.min.js avec la bonne version.

Enfin, il faut noter que $:/plugins/tiddlywiki/d3/d3.js doit être de type application/javascript et le champs module-type doit être library


#5

Bonsoir @Silverfox, j’ai en effet aperçu aujourd’hui le fil que tu avais initié sur la liste anglophone.

J’espère que tu arriveras à continuer tes expérimentations (http://d3jsv5trial.tiddlyspot.com/)


#6

Ce post pour dire que j’ai résolu quelques bugs et j’ai réussi à implémenter un widget D3 “Zoomable Circle Packing” : voir ici http://d3jsv5trial.tiddlyspot.com
C’est joli non ?

J’en ai profité pour faire un petit tutoriel pour les nuls (comme moi) pour donner envie à d’autres d’utiliser D3 dans TiddlyWiki

Je vais pouvoir continuer mon projet. (A suivre…)


#7

Bonjour,

J’ai vu aussi ce travail concernant le plugin D3.js:

Work extending the d3.js plugin : https://ooktech.com/jed/ExampleWikis/d3plugin/

que j’ai juste survolé. Peut t’être utile ?