Forum: PC-Programmierung Javascript D3/Chart - wie bekomme ich diese Beispiel lokal zum laufen


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
von cppbert (Gast)


Lesenswert?

Ich hab hier das für mich perfekte D3 (https://d3js.org/) Line-Chart 
Beispiel mit Javascript gefunden um C++ Benchmark-Ergebnisse schön zu 
präsentieren (normalerweise nutze ich GnuPlot/Excel) - die 
Datengrundlage habe ich fertig nur die Anzeige will nicht so recht 
klappen

Dieses Javascript/D3 Beispiel 
(https://riptutorial.com/de/d3-js/example/20005/einfaches-d3-diagramm--hallo-welt-)

hab ich problemlos zum laufen gebracht - Copy&Paste, läuft

und dann noch diese genau passende Beispiel gefunden
https://observablehq.com/@d3/multi-line-chart

mein Versuch: https://pastebin.com/3iN2twWS
zeigt einfach gar nichts im Browser/auch keine Fehkler
ich sehe auch im Code nicht wie das HTML<->Javascript zusammenspiel 
funktionieren soll

ich mich mit Javascript (oder besser gesagt die Integration in eine HTML 
Seite) nicht wirklich aus - nur was ich normalweise so in QML/Qbs nutze 
- d.h. ich habe keine Ahnung wie die Interation zwischen Javascript/D3 
und der HTML-Ausgabe funktioniert, oder was ich vergessen habe zu 
verbinden

Kann jemand helfen?

von cppbert (Gast)


Lesenswert?

Chrome: Strg+Shift+J zeigt mir einen

"Uncaught SyntaxError: Unexpected identifier" Fehler

dem Browser scheint das create in "const svg = d3.create("svg")" nicht 
zu schmecken

von Mathias M. (matjes)


Lesenswert?

Das muss irgendein Javascript mist sein, der einem 10 Zeichen tippen 
spart. Das Problem ist, dass "chart = {" ein Objekt erzeugen will, aber 
der Body irgendwie offensichtlich eine Funktion sein will. Probiers mal 
mit "chart = function(){", später dann noch "data = function() {" Ich 
denke damit kommt man schon weiter, aber dann kommt ein Fehler beim 
"await FileAttachment". Ich hab jetzt keine Ahnung, was das genau macht 
und keine Zeit/Lust mich damit zu beschäftigen. Vielleicht hilfts ja 
schon.

von Jan H. (j_hansen)


Lesenswert?

Ganz zu Beginn soll mit "chart = {" ein Objekt erzeugt werden, die 
Syntax danach passt aber nicht ("=" statt ":", Statements die hier nicht 
hingehören etc.). Sieht eher aus wie ein normaler Funktionsblock...

von cppbert (Gast)


Lesenswert?

Jan H. schrieb:
> Ganz zu Beginn soll mit "chart = {" ein Objekt erzeugt werden, die
> Syntax danach passt aber nicht ("=" statt ":", Statements die hier nicht
> hingehören etc.). Sieht eher aus wie ein normaler Funktionsblock...

scheint wohl eine spezifischere Syntax von dieser Tutorial Seite zu 
sein: https://observablehq.com/@d3/multi-line-chart, damit man 
on-the-fly Änderungen einbauen und testen kann

von cppbert (Gast)


Lesenswert?

cppbert schrieb:
> Jan H. schrieb:
>> Ganz zu Beginn soll mit "chart = {" ein Objekt erzeugt werden, die
>> Syntax danach passt aber nicht ("=" statt ":", Statements die hier nicht
>> hingehören etc.). Sieht eher aus wie ein normaler Funktionsblock...
>
> scheint wohl eine spezifischere Syntax von dieser Tutorial Seite zu
> sein: https://observablehq.com/@d3/multi-line-chart, damit man
> on-the-fly Änderungen einbauen und testen kann

https://talk.observablehq.com/t/notebook-to-vanilla-javascript-steps/1644/2

Antwort schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.
Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt.
Bitte hier nur auf die ursprüngliche Frage antworten,
für neue Fragen einen neuen Beitrag erstellen.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.