LeaK: JSON in D3.js einbinden

SELF-Forum

JSON in D3.js einbinden

LeaK (Versionen)
– Informationen zu den Bewertungsregeln

Hallo liebes Forum :)

Ich muss für ein Uni-Projekt eine JSON Datei erstellen, die später von D3.js aufgenommen und zu einem Balkendiagramm verarbeitet wird. Frage eins: ist es möglich eine JSON Datei mit mehreren Einträgen zu einem Attribut zu schreiben, also wie folgt:

[
{"ID":1, "BewertungDurchschnitt": 4, "Bewertung": [6, 4, 6], "Monat": "Februar", "Kommentare": [6,4,2], "Portaldurchschnitte": [4, 4.5, 5]}
]
Überhaupt was funktioniert hat es, als die Datei wie folgt aussah:

[
{"ID": 1,"BewertungGesamt":4 ,"Geschlecht": 0,"BewertungPersonal": 6,"BewertungEssen": 4,"BewertungSauberkeit": 6,"Monat": "Februar","Bewertungen": 3,5,7 "negativeBewertungen":5, "BewertungJameda":4, "BewertungWeisseListe": 4,5, "BewertungKrankenhausfinder": 5 }, 
{"ID": 2,"BewertungGesamt":5 ,"Geschlecht": 1,"BewertungPersonal": 5,"BewertungEssen": 3,"BewertungSauberkeit": 5,"Monat": "März","positiveBewertungen": 9,"negativeBewertungen":1 }, 
{"ID": 3,"BewertungGesamt":3 ,"Geschlecht": 2,"BewertungPersonal": 2,"BewertungEssen": 2,"BewertungSauberkeit": 7,"Monat": "Januar","positiveBewertungen": 2,"negativeBewertungen":4 }, 
{"ID": 4,"BewertungGesamt":2 ,"Geschlecht": 0,"BewertungPersonal": 1,"BewertungEssen": 7,"BewertungSauberkeit": 8,"Monat": "Dezember","positiveBewertungen": 7,"negativeBewertungen":2 }, 
{"ID": 5,"BewertungGesamt":5 ,"Geschlecht": 1,"BewertungPersonal": 8,"BewertungEssen": 9,"BewertungSauberkeit": 2,"Monat": "Oktober","positiveBewertungen": 4,"negativeBewertungen":3 }, 
{"ID": 6,"BewertungGesamt":2 ,"Geschlecht": 1,"BewertungPersonal": 9,"BewertungEssen": 8,"BewertungSauberkeit": 1,"Monat": "Januar","positiveBewertungen": 6,"negativeBewertungen":5 }, 
{"ID": 7,"BewertungGesamt":1 ,"Geschlecht": 2,"BewertungPersonal": 3,"BewertungEssen": 2,"BewertungSauberkeit": 6,"Monat": "April","positiveBewertungen": 3,"negativeBewertungen":7 }
]

dann gibt er aber in einem Balkendiagramm wenn man die Dateien zum Beispiel von "BewertungPersonal" ausgibt alle Balken von allen IDs zu den Berwertungen des Personals aus, ich will aber eigentlich, dass er einen Balken für Personal, einen für Essen und einen für Sauberkeit erstellt und weiß nicht, wie ich ihm das verklickern soll ... Ich schicke euch auch nocheinmal meinen bisherigen Programmcode, vielleicht wird es dann klarer

<!DOCTYPE html>
	<html>
	
	<head>
		<title> Versuche </title>
	<script src="d3.min.js" charset="utf-8"></script>

</head>
	
	<body>
	
	<script>
	
	d3.json("BeispieldatensatzGanzklein.json", function (data) {

	var canvas = d3.select("body").append("svg")
					.attr("width",1500)
					.attr("height",1500);
	
		
			canvas.selectAll("rect")
					.data(data)
					.enter()
						.append("rect") 
						.attr("width", function (d) {return d.BewertungGesamt * 30 ; } )
						.attr("height",50)
						.attr("y", function (d,i) {return (d.ID - 1) * 60;})
						.attr("fill","blue");
			
						
						
			canvas.selectAll("text")
					.data(data)
					.enter()
						.append("text")
						.attr("fill","white")
						.attr("y", function (d,i) {return d.ID * 60 - 10;}) 
						.text(function (d) { return d.BewertungGesamt;});
						})	
	
		</script>
		
		</body>
		
		</html>

Ich hoffe irgendjemand kann mir helfen :) LG Lea

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. JSON in D3.js einbinden

    Jörg Reinholz Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Moin!

    Das gezeigte JSON kommt ja nicht aus der Luft. Was bedeutet "Ich muss für ein Uni-Projekt eine JSON Datei erstellen,"? Mit der Hand oder mit einem Programm?

    Im Übrigen ist "d3.js" eine sehr spezielle Sache.

    Womöglich bist Du deshalb mit der Frage in der Google-Group besser aufgehoben.

    Jörg Reinholz

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Zweiter Versuch

    Jörg Reinholz Homepage des Autors (Versionen)
    – Informationen zu den Bewertungsregeln

    Moin!

    Also, ich habe mit dem Zeug ein wenig herumgespielt und erkannt, dass allzutiefe, intime Kenntnisse wohl nicht unbedingt nötig sind um Ergebnisse zu erhalten.

    Frage eins: ist es möglich eine JSON Datei mit mehreren Einträgen zu einem Attribut zu schreiben, also wie folgt:

    [
{"ID":1, "BewertungDurchschnitt": 4, "Bewertung": [6, 4, 6], "Monat": "Februar", "Kommentare": [6,4,2], "Portaldurchschnitte": [4, 4.5, 5]}
]

    Offensichtlich: Ja.

    Um Ergebnisse zu erhalten musst Du aber auch nach dem Inhalt des Arrays fragen, der in Deinem Objekt steckt - Ausschnitt:

    canvas.selectAll("text")
      .data(data)
      .enter()
		.append("text")
		.attr("fill","white")
		.attr("y", function (d,i) {return d.ID * 60 - 10;}) 
		.text(function (d) { return 'Erster Wert aus Bewertung: ' + d.Bewertung[0];});

    Ich hoffe irgendjemand kann mir helfen :)

    Du musst wissen, dass Du das Diagramm dennoch selbst zusammenbaust. Nur das Erzeugen von SVG wird Dir abgenommen.

    Jörg Reinholz

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln