Michael

Force Directed Graph mit D3 v4/v5

In einem gerichteten-Kräfte Diagramm oder vielleicht auch Kräfte-basierten Diagramm lassen sich komplexe Beziehungen von Datenpunkten, zum Beispiel Personen abbilden. Ich möchte damit versuchen, eine geeignete Darstellung für Beziehungen zwischen Personen aus einer Adressdatenbank zu entwickeln.

Darstellung eines
Der Force-Direction Graph von Mike Bosstok

Wenn ich für D3 eine neue Diagrammart versuche ergibt sich meist ein typisches Problem: Wo finde ich ein passendes Beispiel mit Quelltexten, von dem aus ich mit meinen Experimenten starten kann? Bei Mike Bostock finden sich natürlich Beispiele, aber die meisten davon sind in Version 3 verfasst und eine Portierung auf die aktuelle Version 5 ist mühselig, finde ich. Heute habe ich Glück, mein Ausgangsbeispiel unter https://bl.ocks.org/mbostock/4062045 ist bereits für Version 4 geschrieben. Hier sind die Unterschiede zur aktuellen Version 5 nicht sehr gravierend.

Um den Code klarer zu strukturieren, zerlege ich das Projekt zunächst in einzelne Dateien (HTML, CSS, JS). 

>> Codes auf Git

force-directed-graph.html
assets/css/force-directed-graph.css
assets/js/force-directed-graph.js
assets/data/miserables.json

force-directed-graph.html

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title>Forced Direction Graph</title>
    <link rel="stylesheet" href="assets/css/force-directed-graph.css">
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    <svg width="960" height="600"></svg>
    <script src="assets/js/force-directed-graph.js" charset="utf-8"></script>
  </body>

</html>

force-directed-graph.js nach Version 5 ändern

Nach dem Austauschen der JSON-Ladefunktion sollte das Skript bis zum Laden der Daten funktionieren:

// old v4 code
d3.json("assets/data/miserables.json", function (error, graph) {
   if (error) throw error;
   ...

//new v5 code width promise
d3.json("assets/data/miserables.json")
    .then(function (graph) {
    ...
// change in HTML
<script src="https://d3js.org/d3.v5.min.js"></script>
Der Graph funktioniert, aber ohne Farben.

Ein Wechsel des Farbschemas von 20 nach 10 funktioniert schon mal. Damit

var color = d3.scaleOrdinal(d3.schemeCategory10);

Damit ist die Arbeitsgrundlage erstmal fertig. Der so umgebaute Code ist als assets/js/force-directed-graph-001.js gespeichert. Nun geht es ans Analysieren und Verbessern der Codestruktur. Ich mag wiederverwendbaren Code und einen C-like-Variablen und Werteblock am Anfang des Skriptes. 

Erst mal gut für heute.