JSON in D3.js einbinden bearbeitet von LeaK 17.05.2015 12:25 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: ~~~ javascript [ {"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 ~~~ html <!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
JSON in D3.js einbinden bearbeitet von Christian Kruse 18.05.2015 11:15 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
nicht angemeldet nicht angemeldet
