2016-12-21 4 views
0

Ich habe D3 seit etwa einem Jahr verwendet, und ich habe Dashboards in der Vergangenheit ohne Problem gemacht. Diesmal habe ich jedoch eine ziemlich merkwürdige Bodenwelle getroffen. Ich habe einen geographischen Armaturenbrett mit Topo JSON und einer horizontalen Balkendiagramm darunter, die hier an meinem Kern/Block gefunden werden kann:D3 Teil des Dashboards nicht angezeigt

http://bl.ocks.org/diggetybo/77469aa2acec38f1870197724ea671d6

Hinweis Sie das vollständige Ansichtsfenster anzuzeigen können klicken, um die Blöcke website scheint iframe height auf 500 zu beschränken. (Sie können alle Dateien außer index.html ignorieren, die anderen sind nur Quellcodes und meine tsv-datei)

In der Vergangenheit hat meine typische Dashboard-Technik eine separate zugewiesen Div für jedes Diagramm meines Dashboards. Während das Problem hier ist, dass dort horizontale Balken unter der Karte der USA sichtbar sein sollen. Trotz viel Basteln werden die horizontalen Balken nicht angezeigt. Ich habe sie immer noch auf dieselbe Weise angehängt - das hat in der Vergangenheit immer für mich funktioniert. Ich bin also nicht sicher, warum das horizontale Balkendiagramm nicht angezeigt wird.

Entwickler-Tools melden, dass es überhaupt keine Fehler gibt - was merkwürdig ist. Ich kann klar sagen, dass etwas nicht stimmt, weil die Hälfte meines Armaturenbretts fehlt.

Ich habe Kommentare in index.html hinzugefügt, um anzuzeigen, wo der Balkendiagrammteil des Codes ist. Insbesondere Zeilen: 159-228.

Es könnte auch hilfreich sein, konzeptionell zu artikulieren, was das horizontale Balkendiagramm "macht", nur für den Fall. Es soll an eine Variable angehängt werden, die meine geparsten Daten vom größten zum kleinsten Wert sortiert hat (d.fxb in meinem tsv) und eine Füllung nach einer linearen Farbskala gegeben hat.

UPDATE

Ich habe den Stil Anruf geschlossen, und jetzt Ärger Ich bin die anderen Fehler zu schießen. Leider bleibe ich in der ersten Zeile des Balkendiagrammbereichs stecken. Linie 160. Ich habe den Kern aktualisiert, und ich werde die entsprechenden Zeilen hier für eine einfache Referenz ist:

var values = data.fxb.sort(function(a, b) { 
    return -(a - b); 
}); 

var name_value_array = json.features.name; 


var name_values = name_value_array.sort(function(a, b) { 

    return -(a.value - b.value); 

}); 

Ich erhalte eine Fehlermeldung, die besagt:. Sort ‚undefinierte„nicht Eigentum lesen‘Mein Wissen Das Array sollte definiert werden.Dieses Mal war ich sehr vorsichtig, um sicherzustellen, dass alles in den richtigen )} Tokens eingeschlossen ist.Ich habe dreifach geprüft, um sicherzustellen, dass diese Zeilen noch von der Datenparsingfunktion eingeschlossen sind.So bin ich mir nicht sicher warum Ich habe Vertrauen in den unteren Teil des Balkendiagramm-Codes, also wenn jemand sehen könnte, was mich hält, wäre ich sehr dankbar.

Vielen Dank

+1

'var name_values ​​= name_values.sort (...)'? –

+0

Ich komme aus einem Python-Hintergrund, wo diese Art von Zuweisung erlaubt ist. Aber ja, ich habe auch ein paar Wimpern auf diesen Teil geschlagen, es hat zumindest keine Fehler verursacht. –

+1

@ArashHowaida, das ist auch in JS völlig normal.Stellen Sie nur fest, dass das Original auch mutiert ist, in diesem Fall leider - Sie müssen das Array zuerst klonen, wenn Sie diesen Effekt vermeiden wollen. –

Antwort

2

Dies wird nicht alle Ihre Probleme lösen, aber Sie haben style call nicht geschlossen.

.style("fill", function(d) { 
    // Get data value 
    var value = d.properties.fxb; 
    if (value=='None') { 
    return "#999999" 
    } 
    if (value) { 
    //If value exists… 
    return color(value); 
    } else { 
    //If value is undefined… 
    return "#999999"; 
    } 

Sie auch dann mit einem zusätzlichen }); am unteren Rand des Skripts am Ende (wo der style Anruf schließlich geschlossen wird)

Es gibt mehr Fehler sind, aber das ist sie beim Schlucken und den Grund, dass sie werden nicht angezeigt.

+0

gutes Auge, ich wusste, dass es eine rationale Erklärung dafür geben muss. –

+0

Ich werde über die Fehler schauen und hoffentlich die Lösung bieten, um die Balken erscheinen zu lassen. Ansonsten kann ich genauere Angaben zu meinen Hindernissen machen. Vielen Dank für Ihre Antwort. –