2016-09-14 1 views
-1

Ich benutze das d3js zusammenklappbare Baumgitter, um die Knoten anzuzeigen, und wenn ich den Code in Plunker ausführen, bekomme ich eine seltsame 400 schlechte Anfrage Fehler.D3js zusammenklappbaren Baum werfen schlechte Anfrage

Ich habe den Code ersetzt, die den json holt und schwer, die json direkt wie unten gekennzeichnet:

var treeData ={"user_id":0,"name":"Root Node","children":[{"user_id":0,"name":"Flossie Hickman","children":[....]}]}; 

    // Calculate total nodes, max label length 
    var totalNodes = 0; 
    var maxLabelLength = 0; 
    // variables for drag/drop 
    var selectedNode = null; 
    var draggingNode = null; 
    // panning variables 
    var panSpeed = 200; 
    var panBoundary = 20; // Within 20px from edges will pan when dragging. 
    // Misc. variables 
    var i = 0; 
    var duration = 750; 
    var root; 

Link to Plunker

Können Sie bitte lassen Sie mich wissen, wo ich falsch werde.

+1

Die Plunker Sie funktioniert wie Charme verknüpft. Wo befinden sich die Zeilen, die Sie oben angegeben haben? Was ist dein tatsächliches Problem? – elias

+0

@elias der Plunker gibt Bad Request Fehler. Bitte überprüfen Sie diesen Link - http://plnkr.co/edit/pmD1LILsNHaaEI4dADlo?p=preview Der Code, den ich erwähnt habe, ist in 'dndTree.js' Skriptdatei vorhanden. – zilcuanu

+0

Sind Sie sicher, dass Sie das Projekt verlinken, von dem Sie sprechen? Ich bekomme keine Fehlermeldung, ich sehe keine dndTree.js-Datei, und alles wird gut und ohne Probleme für mich angezeigt. – elias

Antwort

2

Ihr Code zeigt keinen Fehler in der Konsole an. Ich normalerweise tue dies nicht, aber hier ist ein Bild zum Beweis:

enter image description here

Noch nichts up zeigen. Der Grund ist einfach: Sie Ihr Skript ... rufen

<script src="dndTree.js"></script> 

... vor dem <body>, wo Sie diese div haben:

<div id="tree-container"></div> 

Welches ist das div verwendet, um das svg zu erstellen:

var baseSvg = d3.select("#tree-container").append("svg") 

Also, das ist die richtige Reihenfolge:

<body> 
    <div id="tree-container"></div> 
    <script src="dndTree.js"></script> 
</body> 

Als eine gute Übung verweisen Sie Ihr Skript am unteren Rand des Körpers. Hier

ist der Arbeits Plunker (und ich betone „arbeiten“): http://plnkr.co/edit/2aLPBuEXN9f6Tlwekdg5?p=preview

+0

der Plünderer, den Sie geteilt haben, funktioniert. Können Sie mir bitte helfen, den Parameter zu verstehen, der für die Länge und den Bogen der Linie zwischen den Knoten verantwortlich ist? Ich brauche mehr Kurve und weniger Länge. Ich bin völlig neu in D3.js – zilcuanu

+0

Da dies ein anderes Problem ist, bitte * eine andere * Frage, erklären das Problem und das gewünschte Ergebnis. –

+0

Hier finden Sie den Link für die neue Frage - http://StackOverflow.com/questions/39492177/d3-js-collapsible-chart-increasing-the-arc-curve-radius – zilcuanu