Frage zu Kreisdiagrammen im Wiki-Artikel „Balken-_und_Kreisdiagramme“

[Rolf B]

Hallo Robert B.,

ich habe mir deinen Code angeschaut und bin vom Ergebnis erfreut, aber im Detail leicht unzufrieden.

• onclick Attribute statt addEventListener
• Die Table-Klasse ist nicht wirklich nützlich, eine einfache Funktion "showdata" oder so wäre besser
• Die Piece-Klasse ist viel zu umfangreich, die meisten Dinge, die sie enthält, kann man beim erzeugen der Segmente berechnen. Ein Piece muss eigentlich nur die Farbe und den Wert enthalten. Den Prozentwert kann man als Optimierung hinzufügen. Den Rest braucht sie nicht.
• newSvg heißt vermutlich besser createSvgElement und sollte konsequent genutzt werden
• statt assert2Cols würde ich eine Funktion machen, die eine einzelne Zeile parsed und ein Piece liefert. Du verwendest ein Array um die geparsten Werte zu speichern und generierst dann Pieces daraus, ich finde das schwer nachvollziehbar. Das Parsen einer Zeile sollte auch funktionieren, wenn Spaces vorn oder hinten sind, oder mehr als ein Space zwischen Farbe und Wert steht. Wie wär's mit einer RegExp?
• reduce funktioniert auch ohne Sonderbehandlung für length=1. Verwende den dritten Parameter (Anfangswert) und übergib 0.
• die Sonderbehandlung für Pies mit 180° Größe braucht es auch nicht.
• du verwendest sehr gerne .forEach, das macht es aber auch unübersichtlich. Hast Du Dir mal die for...of Schleife angeschaut?

Woher bin ich so „schlau“? Ich habe mir den Code eine gute Stunde lang angeschaut und dran hin- und hergebaut. Das Ergebnis ist auch nicht unbedingt so wie ich es gern hätte, darum behalte ich es lieber noch für mich…

Das Problem mit dem Rand bei :hover ist eins, für das ich aber auch noch keine Idee habe. SVG kennt keine z-order und die Hinweise, die man im Netz finden, besagen, dass man das zu hovernde Element im DOM nach hinten setzen müsse, damit es in der z-order vorne ist. Das braucht dann natürlich mousemove Handler und noch mehr JavaScript. Was ich eigentlich doof finde. Vielleicht bekommt man das Chart ja so hin, dass die Ränder sich nicht überlagern. Leider kennt SVG auch keine Option "male den Rand an der Innenseite", d.h. da muss man dann die Punkte für den Rand separat berechnen.

Rolf