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.