Ergebnis 1 bis 4 von 4

Thema: Einbindung D3 Graphikbibliothek: Einfache javascript-Einbindung klappt nicht

  1. #1
    Contao-Nutzer
    Registriert seit
    09.03.2014.
    Beiträge
    87

    Standard Einbindung D3 Graphikbibliothek: Einfache javascript-Einbindung klappt nicht

    Hallo

    Ich versuche für ein Projekt die D3 Bibliothek (Javascript) einzubinden.

    Gemäß Anleitung auf https://bl.ocks.org/mbostock/7322386 reicht dazu
    - die Einbindung der Bibliothek (Neuste Version: <script src="https://d3js.org/d3.v4.min.js"></script>)
    - HTML > im Wesentlichen ein div mit etwas css-style:
    Code:
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>
    .chart div {
      font: 10px sans-serif;
      background-color: steelblue;
      text-align: right;
      padding: 3px;
      margin: 1px;
      color: white;
    }
    </style>
    <div class="chart"></div>
    sowie etwas Javascript-Code:
    Code:
    <script>
    var data = [4, 8, 15, 16, 23, 42];
    var x = d3.scale.linear()
        .domain([0, d3.max(data)])
        .range([0, 420]);
    d3.select(".chart")
      .selectAll("div")
        .data(data)
      .enter().append("div")
        .style("width", function(d) { return x(d) + "px"; })
        .text(function(d) { return d; });
    </script>
    Ich habe versucht, die Bibliothek über das Seitenlayout einzubinden, ebenso den Javascriptcode > funktioniert nicht. Dito, wenn Bibliothek über Seitenlayout, Javascript-Code aber auf der Seite direkt eingebunden wird.

    Sieht jemand, wo mein Denkfehler liegt?

    Danke und Gruss
    M

  2. #2
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.280

    Standard

    Hast du in den Einstellungen <script> Tags erlaubt? Oder wird es direkt ins Template geschrieben?

  3. #3
    Contao-Nutzer
    Registriert seit
    09.03.2014.
    Beiträge
    87

    Standard

    <script> in Einstellungen erlaubt. Ist aber sicherheitsmäßig wohl ein Unsinn. Werde das nochmals innerhalb eines Moduls d.h. direkt in einem template versuchen.

  4. #4
    Contao-Nutzer
    Registriert seit
    09.03.2014.
    Beiträge
    87

    Standard Lösung

    Also, die Lösung ist eigentlich einfach (und logisch):

    1. Das Ganze in ein Modul packen. Die Bibliothek wird wie üblich in die Seite geladen, der spezifische Code für die Grafik in ein Template.
    2. Der Skriptcode in oben beschriebener Form wird ja nicht aufgerufen. Der gesamte Code ist also zu kapseln in

    Code:
    window.onload = start;
    	function start () {
     
    }
    Dann funktioniert das. Beispiel (mit anderem Code, benötigt noch etwas finetuning): https://phinetwork.ch/wolf/dynamicgraph.html

    Gruss M

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •