javascript to - Wie konvertiert man in das JSON-Format von D3?





csv node (3)


D3 benötigt kein spezielles Format. Alles hängt von Ihrer Anwendung ab. Sie können sicherlich eine Adjazenzliste in das Format konvertieren, das in flare.json verwendet wird, aber das wäre wiederum ein anwendungsspezifischer Code. Im Allgemeinen können Sie das nicht tun, da Adjazenzlisten als solche keine "Kopf" - oder "Wurzel" -Elemente haben, die Sie benötigen, um einen Baum zu erstellen. Außerdem müsstest du Zyklen, Waisen usw. getrennt behandeln.

Da Sie derzeit die Konvertierung auf der Serverseite durchführen, wäre ich versucht zu sagen, dass "wenn es nicht kaputt ist, beheben Sie es nicht";)

Bei der Befolgung zahlreicher D3-Beispiele werden Daten normalerweise in dem Format formatiert, das in flare.json :

{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      :

Ich habe eine Adjazenzliste wie folgt:

A1 A2
A2 A3
A2 A4

welches ich in das obige Format konvertieren möchte. Momentan mache ich das auf der Serverseite, aber gibt es eine Möglichkeit, dies mit den Funktionen von d3 zu erreichen? Ich habe hier einen here , aber der Ansatz scheint eine Modifikation der d3-Kernbibliothek zu erfordern, die ich aufgrund der Wartbarkeit nicht befürworte. Irgendwelche Vorschläge?




Es gibt kein vorgeschriebenes Format, da Sie Ihre Daten normalerweise über verschiedene Accessor-Funktionen (z. B. hierarchy.children ) und array.map . Aber das von Ihnen angegebene Format ist wahrscheinlich die am besten geeignete Darstellung für Bäume, da es mit den Standardaccessoren funktioniert.

Die erste Frage ist, ob Sie ein graph oder einen tree anzeigen graph . Für Graphen wird die Datenstruktur in Bezug auf nodes und links . Bei Bäumen ist die Eingabe in das Layout der Wurzelknoten, der ein Array von hierarchy.children kann und dessen Blattknoten einen zugeordneten value .

Wenn Sie ein Diagramm anzeigen möchten und Sie nur eine Liste mit Kanten haben, sollten Sie über die Kanten iterieren, um ein Array von Knoten und ein Array von Verknüpfungen zu erstellen. Angenommen, Sie hatten eine Datei namens "graph.csv":

source,target
A1,A2
A2,A3
A2,A4

Sie könnten diese Datei mit d3.csv und dann ein Array von Knoten und Links erzeugen:

d3.csv("graph.csv", function(links) {
  var nodesByName = {};

  // Create nodes for each unique source and target.
  links.forEach(function(link) {
    link.source = nodeByName(link.source);
    link.target = nodeByName(link.target);
  });

  // Extract the array of nodes from the map by name.
  var nodes = d3.values(nodeByName);

  function nodeByName(name) {
    return nodesByName[name] || (nodesByName[name] = {name: name});
  }
});

Sie können diese Knoten und Links dann an das Force-Layout übergeben, um den Graphen zu visualisieren:

Wenn Sie stattdessen einen Baum erstellen möchten, müssen Sie eine geringfügig andere Form der Datenumwandlung durchführen, um die untergeordneten Knoten für jeden übergeordneten Knoten zu akkumulieren.

d3.csv("graph.csv", function(links) {
  var nodesByName = {};

  // Create nodes for each unique source and target.
  links.forEach(function(link) {
    var parent = link.source = nodeByName(link.source),
        child = link.target = nodeByName(link.target);
    if (parent.children) parent.children.push(child);
    else parent.children = [child];
  });

  // Extract the root node.
  var root = links[0].source;

  function nodeByName(name) {
    return nodesByName[name] || (nodesByName[name] = {name: name});
  }
});

Wie so:




Da das <script> -Tag von der Same Origin Policy ausgenommen ist, ist dies eine Sicherheitsnotwendigkeit in der Web-Welt, while(1) der JSON-Antwort hinzugefügt wird, wenn es dem <script> -Tag missbräuchlich verwendet wird.







javascript json graph d3.js tree