Problème position graphique svg

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

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

    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.
    Dernière édition par medachab à 18/12/2020, 16h03

  • #2
    Re : Problème position graphique svg

    Bonjour,

    Une URL pour voir le problème en vrai ?
    UP, le plugin universel à découvrir sur https//up.lomart.fr
    bgMax
    , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

    Commentaire


    • #3
      Re : Problème position graphique svg

      Envoyé par lomart Voir le message
      Bonjour,

      Une URL pour voir le problème en vrai ?
      Oui, pas faux. Bon, le résultat, c'est ça :

      Commentaire


      • #4
        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 ?
        UP, le plugin universel à découvrir sur https//up.lomart.fr
        bgMax
        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

        Commentaire


        • #5
          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.

          Commentaire


          • #6
            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
            UP, le plugin universel à découvrir sur https//up.lomart.fr
            bgMax
            , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

            Commentaire


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

              Envoyé par lomart Voir le message
              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 :
              Code:
              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 :

              Code:
              var svg = d3.select("#fav-mainwrap").append("svg")
              Merci pour ton temps, c'est génial !!

              Commentaire

              Annonce

              Réduire
              Aucune annonce pour le moment.

              Partenaire de l'association

              Réduire

              Hébergeur Web PlanetHoster
              Travaille ...
              X