Ja, Sie können das mit einem SVG-Gradienten tun. Alles, was Sie tun müssen, ist es zu definieren und dann als Füllung für den Kreis zu verwenden.
%Vor%JSfiddle hier .
Sie brauchen nicht einmal d3 für diese einfache Aufgabe. Sie können diese einfache Technik verwenden, mit Clippath für einen Kreis, ich habe es ausführlich in meinem Blog Ссылка
Verwenden Sie zwei Kreise übereinander in einem Tag. Füllen Sie einen mit der gewünschten Farbe und einen anderen mit Weiß oder Ihre Hintergrundfarbe, nur damit es dort wie leer aussieht. Schneiden Sie dann den späteren Clip mit einem Rechteck ab und weisen Sie ihm einen Radius von weniger als einem Pixel zu. Platzieren Sie den Clip-Pfad oben links. Weisen Sie eine Breite zu, die dem Durchmesser des Kreises entspricht, und die Höhe wird durch Ihre Daten definiert. Die Daten werden reversibel auf die Füllung wirken, so dass Sie die tatsächlichen Daten von Ihrer max subtrahieren können. EG: Wenn die Daten 20/100 sind, dann tue 100-20, so dass 80 auf diese Weise erhalten werden, der leere Teil wird 80 und gefüllt wird 20 sein.
Sie können zwischen Höhe und Breite wechseln, um zwischen vertikaler oder horizontaler Füllachse zu wechseln.
Der HTML sollte so aussehen.
%Vor%Ich habe ein Beispiel geschaffen, um dies zu veranschaulichen: Ссылка
Erstellen Sie ein div mit dem ID-Namen id_cirlce und fügen Sie diesen Code in das Skript-Tag
ein %Vor%