[RÉGLÉ] Problème position graphique svg

[medachab]

Bonjour,

Alors voilà, j'ai voulu placer un graphique réalisé avec d3js (html et js avec l'introduction d'une svg) dans le corps d'un article avec Sourcerer et le graphique apparait bien, mais... en bas de la page au niveau du "backtop". Pourtant, le code est positionné au bon endroit dans le débogueur de Fifefox - j'ai aussi essayé avec Chrome et le résultat est le même.

Je suis débutant dans Joomla, mais j'ai compris que la gestion du svg était complexe. Pourtant le graphique apparait en l'occurrence et j'en déduis, peut-être à tort qu'il s'agit d'un problème de css. Je ne sais pas trop où chercher et surtout comment régler ce positionnement. J'utilise un template Favourite, mais le résultat est le même avec Beez.

Pour info, j'ai essayé de l'insérer dans des modules ou dans des iframe et le résultat est toujours le même : un affichage en bas de page.

[lomart]

Re : Problème position graphique svg

Bonjour,

Une URL pour voir le problème en vrai ?

[medachab]

Re : Problème position graphique svg

Bonjour,

Une URL pour voir le problème en vrai ?

Oui, pas faux. Bon, le résultat, c'est ça :

http://www.md-wip.fr/index.php/portfolio/8-canard-en-ligne

[lomart]

Re : Problème position graphique svg

Le code est bien inséré en fin de page.

Pourquoi utiliser sourcerer, une balise svg peut se mettre directement dans le code d'un article ? A moins que l'image soit calculée avant affichage ?

[medachab]

Tout d'abord merci pour ta réponse !!

Il me semble effectivement que le calcul précède l'affichage. J'ai essayé d'insérer la balise <svg width="960" height="500"> ... </svg> autour du code (éditeur tinyMCE) sans succès.

<div class="caption"><span style="font-family: courier new, courier, monospace;">&lt;
<span class="hljs-tag"><span class="hljs-title">svg</span>
<span class="hljs-attribute">width</span>=<span class="hljs-value">"960"</span>
<span class="hljs-attribute">height</span>=<span class="hljs-value">"500"</span>&gt;</span></span></div>
<div class="caption"><span style="font-family: courier new, courier, monospace;">&lt;image {source}<br />&lt;!DOCTYPE html&gt;<br />&lt;meta charset="utf-8"&gt;<br />&lt;style&gt;<br />.bar {<br />fill: firebrick;<br />}<br />.bar text {<br />fill: #fff;<br />font: 10px sans-serif;<br />}<br />.grid line {<br />stroke:lightgrey;<br />stroke-opacity: 0.3;<br />shape-rendering: crispEdges;<br />}<br />.grid path {<br />stroke-width: 0;<br />}<br />&lt;/style&gt;<br />&lt;body&gt;<br />
...

Le résultat reste le même. De même, j'avais essayé sans Sourcerer, mais je n'ai réussi à le visualiser qu'avec ce plugin.

[lomart]

Re : Problème position graphique svg

A première vue, je dirais que tinyMCE a nettoyé-optimisé ton code SVG
Essaie en mode code avec tiny et si ça ne marche pas, sélectionne l'éditeur codeMirror dans ton profil utilisateur

Une fois le problème résolu, on cherchera une solution perenne

[medachab]

[Réglé] Re : Problème position graphique svg

A première vue, je dirais que tinyMCE a nettoyé-optimisé ton code SVG
Essaie en mode code avec tiny et si ça ne marche pas, sélectionne l'éditeur codeMirror dans ton profil utilisateur

Une fois le problème résolu, on cherchera une solution perenne

Ok, ce n'était pas ça, mais ça m'a orienté pour revoir mon code. Et là ...

Le svg doit être ajouté non au body comme habituellement :

var svg = d3.select("body").append("svg")

// dans ce cas, ça apparaitra systématiquement à la fin du "body" et pas dans le corps de l'article.

mais à une div du template :

var svg = d3.select("#fav-mainwrap").append("svg")

Merci pour ton temps, c'est génial !!