[GELÖST] Kann jemand bei diesem Javascriptcode mit d3.js helfen?

[milesdavis]

Hallo liebe Gemeinde,

bin leider noch recht frisch, was Javascript angeht.
Nun wollte ich Javascript in Verbindung mit d3.js probieren und habe versucht, diesen Code mit Notepad++ zu kopieren und zum laufen zu bringen:

https://gist.github.com/mbostock/1093130

Nur leider funktioniert er bei mir nicht, nachdem ich daraus eine Html-Datei erstellt habe. Also anstatt eines Force-Graphen erscheint nur eine weisse HTML-Seite.
Kann mir von euch einer auflären, woran das liegen könnte?
In der Kommentarfunktion des Links ganz unten, hat schon ein anderer User das Problem gebabt, dass es nicht funktioniert.
Vielen lieben Dank!
VG

- - - Aktualisiert - - -

Kann es sein, dass es an der json-Datei liegt? Ich habe die json-File vom Link einfach in Notepad++ reinkopiert und als als "graph.json" benannt.

 

[tsseh]

was steht denn in der fehlerkonsole?

 

[milesdavis]

was steht denn in der fehlerkonsole?

Fehlerkonsole? Meinst du, wenn man die rechte Maustaste klickt und "Element untersuchen" klickt?

Ich denke, es muss an der json-Datei liegen.
Wenn ich zb. einen Code nehme, bei dem keine externe json-Datei verwendet wird, sondern ein Array im Code, dann funktioniert es, wie etwa bei diesem Code:
Graph with labeled edges - bl.ocks.org

 

[mikdoe]

Fehlerkonsole?

http://forum.jswelt.de/javascript-faq/59953-arbeiten-konsole.html

 

[tsseh]

https://www.google.de/search?q=fehlerkonsole

 

[milesdavis]

danke liebe leute!
noch eine frage hätte ich: wenn ich die datei ganz unten mit den geschweiften klammern als externe datei "graph.json" im notepad++ abspeichere, damit man im code per

d3.json("graph.json", function(error, json) {
  if (error) throw error;

drauf zugreifen kann, mache ich dadurch alles richtig?

{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      {"name": "CommunityStructure", "size": 3812},
      {"name": "HierarchicalCluster", "size": 6714},
      {"name": "MergeEdge", "size": 743}
     ]
    },
    {
     "name": "graph",
     "children": [
      {"name": "BetweennessCentrality", "size": 3534},
      {"name": "LinkDistance", "size": 5731},
      {"name": "MaxFlowMinCut", "size": 7840},
      {"name": "ShortestPaths", "size": 5914},
      {"name": "SpanningTree", "size": 3416}
     ]
    },
    {
     "name": "optimization",
     "children": [
      {"name": "AspectRatioBanker", "size": 7074}
     ]
    }
   ]
  }
 ]
}

 

[tsseh]

was steht denn in der fehlerkonsole?

 

[andreax]

Betrifft den Link "https://gist.github.com/mbostock/1093130" vom 1. post.

in der Console steht das die d3.min js nicht zu finden ist
und zwar deshalb weil im beispiel das Protocoll fehlt das is alles.
und die Seite soll nat. auf einem Server od auf localhost liegen
damit das XMLHttpRequest-Object funktioniert.
also diese Zeile

<script src="//d3js.org/d3.v3.min.js"></script>

ändern auf:

<script src="https://d3js.org/d3.v3.min.js"></script>

oder die d3.v3.min.js auf den Server legen zusammen im selben Ordner mit der json und der html Datei.

<script src="d3.v3.min.js"></script>

MFG

 

[mikdoe]

in der Console steht das die d3.min js nicht zu finden ist
und zwar deshalb weil im beispiel das Protocoll fehlt das is alles.

hmm sicher? glaub nicht, das beherrschen alle aktuellen browser
https://tools.ietf.org/html/rfc3986#section-4.2

 

[andreax]

@mikdoe
nein nicht mehr sicher
Ich hab den Quellcode kopiert und in den Editor geladen dann auf ausführen geklickt
daher die Fehlermeldung.
Mit Test über localhost wurde kein Fehler geworfen.

 

[mikdoe]

dann ist die ursache aber gewiss nicht die url syntax. oder ist das ein ie 1?

 

[tsseh]

hmm sicher? glaub nicht, das beherrschen alle aktuellen browser
https://tools.ietf.org/html/rfc3986#section-4.2

wenn das protokoll fehlt, nimmt er das protokoll mit welchem du die seite geöffnet hast.
öffnest du die seite lokal mit dem file protokoll, sucht er auf deiner platte das verzeichniss //irgendwas, welches es vermutlich nicht gibt

 

[milesdavis]

Leute, danke an Alle für die Anregungen. Es hat mithilfe des Hinweises von andreax geklappt. Allerdings reichte ein Hinzufügen von "http", anstatt "https".