D3 Javascript - Probable Problem mit geschachtelten Funktion - generiert Console Fehler

Question

Hallo wieder Stackoverflow. Wie es normalerweise der Fall ist, wenn Sie das ursprüngliche Problem behoben haben, erhalten Sie ein weiteres. Gestern habe ich eine Frage bezüglich gestellt, die eine D3-Visualisierung implementiert. Meine Frage wurde von Sparta93 licky-split beantwortet (vielleicht kannst du auch hier helfen).

Wie ich bereits erwähnt habe, bin ich tatsächlich die D3 Viz in einer verpackten Anwendung, Oracle Big Data Discovery (BDD) einbetten. BDD verwendet einen Visualisierungs-Renderer , um das Diagramm anzuzeigen. Dies erfordert den JS Block innerhalb einer Diagramm-Funktion zu sein (der gesamte Körper des Codes ist in einem verknüpften JS Fiddle unten für eine einfache Lesung und Überprüfung):

renderChart: function(queryResults) { 

Wenn ich den Code ausführen es erzeugt einen Fehler, dass Stratify ist keine Funktion.

Uncaught TypeError: d3.stratify is not a function 
at S.renderChart (script:44) 
at S.executeQueryCallback (eval at globalEval (barebone.jsp:4), <anonymous>:1:3460) 
at S.handleResize (eval at globalEval (barebone.jsp:4), <anonymous>:1:3751) 
at constructor.resizeListener (eval at globalEval (barebone.jsp:4), <anonymous>:1:17193) 
at Object.run (eval at globalEval (barebone.jsp:4), <anonymous>:1:16634) 
at i (barebone.jsp:32) 

Wenn ich den Code neu anordnen und Cluster zuerst platziere, erhalte ich einen ähnlichen Fehler.

Ich vermute, dass das Problem mit der Tatsache zusammenhängt, dass diese beiden Funktionen in "renderChart: function (queryResults)" sind. Ich bin DBA, Big Data und BI-Typ, also sind meine JS-Fähigkeiten ziemlich bescheiden. Ich habe den Code wahrscheinlich kaum genug zusammengehackt, um ihn zum Laufen zu bringen. Ich habe viel einfacher in BDD arbeiten, die nicht Fehler ausgibt. Es hat jedoch keine Unterfunktionen

Hier ist eine Fiddle, wo der Code wie erwartet funktioniert (dank Sparta93). Chart funktioniert im "normalen" Kontext: https://jsfiddle.net/hb4oLy2x/

Hier ist eine Fiddle nur für die Einfachheit der Veröffentlichung des gesamten Codes. Es wird nicht ausgeführt, da es vom serverseitigen BDD-Visualisierungs-Renderer abhängt. Ich habe einige Anmerkungen zu den Elementen gemacht, von denen ich glaube, dass sie das Problem sind. Das Diagramm funktioniert nicht im BDD-Kontext (dies ist der Code mit dem Problem): https://jsfiddle.net/sx7oaput/

Hier ist eine Fiddle, wo ich die URI für d3 v4 entfernt habe. Interessanterweise erzeugt es einen ähnlichen Fehler in der Konsole. Diagrammcode, der Fehler simuliert (möglicherweise nur ein Zufall): https://jsfiddle.net/u48o39k2/

Hier ist eine andere Geige für die Einfachheit der Freigabe des Codes. Dadurch werden die Balkendiagramm- und HTML-Tabelle in BDD erfolgreich gerendert. Diagramm, das in BDD-Kontext funktioniert: https://jsfiddle.net/j7r9f743/

Anleitung, Beratung und/oder Hilfe werden sehr geschätzt.

Answer 1

Ich habe versucht, andere Vorgehensweisen zu betrachten, weil ich wusste, dass einige Visualisierungen tatsächlich funktionieren. Ich habe diesen Code online gefunden und als ich die einzelnen Teile extrahiert und im Arbeitscode den Ersatz getestet habe, habe ich es zum Laufen gebracht.

var tree = d3.layout.tree() 
.size([360, diameter/2 - 80]) 
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 10)/a.depth; }); 

var diagonal = d3.svg.diagonal.radial() 
    .projection(function(d) { return [d.y, d.x/180 * Math.PI]; }); 

http://codepen.io/anon/pen/xItvw

Vielen Dank an "CAPTAIN ANONYMOUS" den Verfasser des Kodex Pen (lol).