mikrocontroller.net

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)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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]
  • [avrasm]AVR-Assembler-Code[/avrasm]
  • [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.

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