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.

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).
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>

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.