Javascript D3/Chart - wie bekomme ich diese Beispiel lokal zum laufen

cppbert Gast #6182270
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?
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
Mathias M. #6182321
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.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
cppbert Gast #6182447
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
Antwort Zitieren Bearbeiten Löschen Beitrag melden
cppbert Gast #6182462
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 Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren